html - 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>




    
      

question from:https://stackoverflow.com/questions/65877909/bootstrap-doesnt-act-in-as-3-grid-layout

Answer 1

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/[email protected]/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>