Skip to main content
R
r_tist
Inspiring
April 18, 2022
Answered

Bootstrap 5 and centering col-8

  • April 18, 2022
  • 4 replies
  • 1187 views

Hi,

 

If col-12 is changed to col-8, the content block is shifting to the left, even though the content within is centered. I would like this content block to maintain its appearance at the "col-8" width, but to be centered on the web page.

Not sure how I can do that? These are the opening tags found in this set-up.

 

<div class="container">
<div class="row">
<div class="col-8">
<div class="carousel slide carousel-fade" id="carouseCta" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<div class="row h-100 align-items-center g-2">
<div class="col-12">
<div class="text-light text-center py-2">
 
...I suspect it may be something to do with the row, as in the code inspector I can see this style encompasses the extra gap to the container, causing the content to pull to the right:
.row {
--bs-gutter-x: 2rem;
--bs-gutter-y: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) / -2);
margin-left: calc(var(--bs-gutter-x) / -2);
}

 

This topic has been closed for replies.
Correct answer BenPleysier

Just add the `justify-content-center` class to the row, as in

 

<div class="container">
    <div class="row justify-content-center">
        <div class="col-8"></div>
    </div>
    <div class="row">
        <div class="col"></div>
    </div>
</div>

 

4 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 19, 2022

To constrain the column width on larger devices, give it a few more classes.

 

<div class="col-sm-8 col-md-7 col-lg-6 mx-auto">

Something here....

</div>

 

Nancy O'Shea— Product User & Community Expert
R
r_tistAuthor
Inspiring
April 28, 2022

I do have one more follow up question.

This section is a slider with testimonials and I would like to target the left and right chevron controls (for nxt & prev) to re-position. Currently some of the testimonial text runs right on top of these since the testimonial block is fairly narrow (as desired).

 

If I apply margin with a negative pixel amount to the class of the chevron rules, I can get the chevron to shift in any direction, however, since it's built into the overall container, it reaches a point where it disappears, goes hidden.

The position is set to absolute.

 

Do you know how I can bring to front, so outside of this container?

Thank you!

O
osgood_
Legend
April 28, 2022

If you have set the carousel up correctly the next/previous arrows shouldnt disappear. Try seting a high z-index: 1000; and see if they re-appear otherwise here's an example below:

 

<!Doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Bootstrap Testimonials Carousel</title>
<style>
#testimonials {
width: 40%;
margin: 0 auto;
}
.carousel-control-prev {
margin: -100px;
}
.carousel-control-next {
margin: -100px;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
color: #000!important;
background-color: rgba(0, 0, 0, 0.5);
width: 2.5rem!important;
height: 2.5rem!important;
background-size: 50% 50%!important;
border-radius: 5px;
}
.carousel-indicators button {
 background-color: #999!important; 
}
.carousel-indicators .active {
background-color: #444;
}
</style>
</head>
<body>
<!-- Carousel -->
<div id="testimonials" class="carousel slide" data-bs-ride="carousel">
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item text-center p-5 active">
<h3>Testimonial 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa consectetur quaerat doloremque fuga delectus quisquam eum architecto animi officiis rem, molestias deserunt, ea quas quidem, magni nisi cupiditate adipisci culpa.
Repellendus.</p>
</div>
<!-- end carousel-item -->
<div class="carousel-item text-center p-5">
<h3>Testimonial 2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa consectetur quaerat doloremque fuga delectus quisquam eum architecto animi officiis rem, molestias deserunt, ea quas quidem, magni nisi cupiditate adipisci culpa.
Repellendus.</p>
</div>
<!-- end carousel-item -->
<div class="carousel-item text-center p-5">
<h3>Testimonial 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa consectetur quaerat doloremque fuga delectus quisquam eum architecto animi officiis rem, molestias deserunt, ea quas quidem, magni nisi cupiditate adipisci culpa.
Repellendus.</p>
</div>
<!-- end carousel-item -->

<div class="carousel-item text-center p-5">
<h3>Testimonial 4</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa consectetur quaerat doloremque fuga delectus quisquam eum architecto animi officiis rem, molestias deserunt, ea quas quidem, magni nisi cupiditate adipisci culpa.
Repellendus.</p>
</div>
<!-- end carousel-item -->
</div>
<!-- end carousel-inner -->
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="3"></button>
</div>
</div>
<!-- end testimonials -->


<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

  </body>
</html>

 

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 18, 2022

Add mx-auto class to center the block horizontally.

 

<div class="col-8 mx-auto">

Something here....

</div>

 

 

Nancy O'Shea— Product User & Community Expert
BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
April 18, 2022

Just add the `justify-content-center` class to the row, as in

 

<div class="container">
    <div class="row justify-content-center">
        <div class="col-8"></div>
    </div>
    <div class="row">
        <div class="col"></div>
    </div>
</div>

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
R
r_tistAuthor
Inspiring
April 18, 2022

I created this additional class to apply, and it worked without affecting other row classes. Do let me know if there would have been a better solution.

 

.carouselRowPosition {
justify-content: center;
}
 
Thank you.
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices