Clever Geek Handbook

Bootstrap three-position positioning

I am trying to align three equal columns exactly in the center of a row with the same padding on both sides inside a liquid container. I cannot place them in the center of the page. I tried setting the width of the container that these three columns are inside. but the layout keeps going on one side and is never centered.

  <div class="container">
    <div class="row yellow">
      <div class="col-lg-12 ">
        <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
          test
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
          test
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
          test
        </div>

      </div>
    </div>
  </div>

Attached result I get: output

As shown here, the layout is right aligned, I want it to align perfectly centered with equal padding between those columns.

It would be nice to know how this can be achieved, I have been trying to do this for a while. your suggestions will definitely help in fixing this.

Thank you in advance

+3


source to share


2 answers


Your problem is that your layout doesn't sum up to 12 columns.

col-lg-3

+ col-lg-3

+ col-lg-3

add up to 9 columns and in bootstraps grid you have 12 columns per row.

also no class col-xxs-**

. (lg = large, md = medium, sm = small, xs = extra small)



this trick does the trick:

<div class="container">
  <div class="row yellow">
    <div class="col-lg-12 ">
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
        test
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
        test
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
        test
      </div>
    </div>
  </div>
</div>

Take a look at Bootrstaps Docs to learn more about the Grid-System: http://getbootstrap.com/css/#grid

+3


source


As @Sadi says, the layout has 12 columns, so you change your columns from col-lg-3 to col-lg-4. Also, you must apply your green to the inner container, otherwise you won't have a pad:

<div class="container">
<div class="row yellow">
   <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
      <div class="green">
        test
        </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12  text-center">
      <div class="green">
        test
        </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12  text-center">
      <div class="green">
        test
        </div>
    </div>
</div>


Codepen: https://codepen.io/giannidk/pen/ZymdOy

+1


source






More articles:


All Articles