• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Bootstrap 5 and centering col-8

Enthusiast ,
Apr 17, 2022 Apr 17, 2022

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.

 

<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);
}

 

TOPICS
How to

Views

362

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Apr 17, 2022 Apr 17, 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>

 

Votes

Translate

Translate
Enthusiast ,
Apr 17, 2022 Apr 17, 2022

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.

 

.carouselRowPosition {
justify-content: center;
}
 
Thank you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 17, 2022 Apr 17, 2022

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>

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 18, 2022 Apr 18, 2022

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 18, 2022 Apr 18, 2022

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>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Apr 28, 2022 Apr 28, 2022

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 28, 2022 Apr 28, 2022

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>

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 04, 2022 May 04, 2022

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines