Bootstrap doesn't act in as 3 grid layout

Question

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

I am trying to create a 3 grid layout using bootstrap. So far here's my code:

.box-logo-padding a {
  display: inline-block;
  margin: 0px auto;
}
      
@media only screen and (min-width: 360px) and (max-width: 1199px) {
  .box-logo-padding a {
    display: flex;
    margin: 0px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

<div class="experience-section section-padding bg-gray" id="experience">
  <div class="container container-wide">
    <div class="row">
      <div class="col-lg-5 col-sm-12" data-aos="fade-right">
          <div class="sidebar">
              <div class="section-title-one sidebar__inner">
                  <div class="section-title-one-inner">
                    <p>Lorem ipsum </p>

                    <div class="row align-items-center text-center mt-20">
                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                            <a href="#" target="_blank" id="item1"></a>
                        </div>

                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                            <a href="#" target="_blank" id="item2"></a>
                        </div>

                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                             <a href="#" target="_blank" id="item3"></a>
                        </div>

                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                             <a href="#" target="_blank" id="item4"></a>
                        </div>
                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                             <a href="#" target="_blank" id="item5"></a>
                        </div>

                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                              <a href="#" target="_blank" id="item6"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

This returns this:

Instead of this:

As you can see instead of 3 grid layout, its showing 100% width on large viewport. The thing here is that on large viewport it should show 3 grid column layout and then on medium screen it should show two grid layout and one grid layout on small. Any idea what's causing this and how to fix it?

Imran Rafiq Rather Imran Rafiq Rather · Accepted Answer · 2021-01-25T02:27:13

Yes,Bootstrap is build on flexbox but, it follows mobile-first approach. While using Bootstrap-4 and above versions, we have to keep the mobile design in mind. And start from small screens and change our classes as per the larger screen sizes.

Here are the changes that you need to do.

CODEPEN LINK: https://codepen.io/emmeiWhite/pen/xxEogNj

Full Working Code:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div class="experience-section section-padding bg-gray" id="experience">
  <div class="container container-wide">
    <div class="row">
      <div class="col-lg-5 col-sm-12" data-aos="fade-right">
          <div class="sidebar">
              <div class="section-title-one sidebar__inner">
                  <div class="section-title-one-inner">
                    <p>Lorem ipsum </p>

                    <div class="row align-items-center text-center mt-20">
                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                            <a href="#" target="_blank" id="item1">Item 1</a>
                        </div>

                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                            <a href="#" target="_blank" id="item2">Item 2</a>
                        </div>

                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                             <a href="#" target="_blank" id="item3">Item 3</a>
                        </div>

                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                             <a href="#" target="_blank" id="item4">Item 4</a>
                        </div>
                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                             <a href="#" target="_blank" id="item5">Item 5</a>
                        </div>

                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                              <a href="#" target="_blank" id="item6"> Item 6</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

NOTE:

We do not need any of the media queries since, bootstrap classes takes care of those.

Also, note that your max-width for the sidebar is taken as per col-lg-5 for the large screens and above. But for small screens and below it would be full width for the sidebar based on your below classes.

<div class="col-lg-5 col-sm-12" data-aos="fade-right">

Bootstrap doesn't act in as 3 grid layout

1 Answers