Copy link to clipboard
Copied
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.
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>
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
Add mx-auto class to center the block horizontally.
<div class="col-8 mx-auto">
Something here....
</div>
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
You do not need to do any of those steps really here.
Col is auto fitting through flexbox and as people have pointed out you then also have the justify features. If you check Boostrap 5 documentation you can also see even more utility options that have greater flexibility that the col-md, mx auto combination which actually is more limiting.