Bootstrap网格不是居中对齐的问题

Question

I am using bootstrap library. So, I was trying to make three grids in while building a website. It's responsive but, not enough. And I cannot center align the grids. But, manually it can be done with a customized class or an ID. For an example let's say i'd like to get the view for tablet view... grids are coming like this... This is how it shows. The grid shows five years is not centered enough. it's giving an odd look.

What's the way to get to move the '5years' grid to center when the tablet view is viewed.

I am attaching my code here.

       <!-- Here are all THREE COLUMNS which says about YEARS GRID  -->
<!-- 1st -->
<div class="row text-center center" id="alignment-margin">

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-tn-12 container " id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
      3 years
      <br/>
      <hr id="small-line">
    </h3>
    <p>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
    </p>
    <button class="btn btn-success rounded customize-button" id="tryButton" type="button">
      Try it now for free
    </button>
  </div>
  <!-- SECOND -->
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-tn-12 container " id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
      1 year
      <br/>
      <hr id="small-line">
    </h3>
    <p>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
    </p>
    <button class="btn btn-success rounded" id="tryButton" type="button">
      Try it now for free
    </button>
  </div>
  <!-- THIRD -->
  <div class="col-lg-4 col-md-4 col-sm-4  col-xs-12 col-tn-12 container" id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
      5 years
      <br/>
      <hr id="small-line">
    </h3>
    <p>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
    </p>
    <button class="btn btn-success rounded customize-button" id="tryButton" type="button">
      Try it now for free
    </button>
  </div>
</div>

Answer 1

You can use a offset for that. This is some extra space, before the column is shown. In your example you want to center a column with the class col-md-4.

In total there are 12 columns, so to center your 5-years block, we need a 4 column offset.

Add the following classes to the last block for only applying to small devices:

col-sm-offset-3 col-md-offset-0

The columns at the top are not centered now. You can use a offset there too, or you can adjust the width. With the example of your code below, I have adjusted the width. More info about the offset classed can be found here

Here is what you want:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-tn-12 container " id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
        3 years
        <br/>
        <hr id="small-line">
    </h3>
    <p>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
    </p>
    <button class="btn btn-success rounded customize-button" id="tryButton" type="button">
        Try it now for free
    </button>
</div>
<!-- SECOND -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-tn-12 container " id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
        1 year
        <br/>
        <hr id="small-line">
    </h3>
    <p>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
    </p>
    <button class="btn btn-success rounded" id="tryButton" type="button">
        Try it now for free
    </button>
</div>
<!-- THIRD -->
<div class="col-lg-4 col-md-4 col-sm-6 col-sm-offset-3 col-md-offset-0  col-xs-12 col-tn-12 container" id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
        5 years
        <br/>
        <hr id="small-line">
    </h3>
    <p>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
    </p>
    <button class="btn btn-success rounded customize-button" id="tryButton" type="button">
        Try it now for free
    </button>
</div>

Hope this is what you wanted to accomplish

Answer 2

 <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> FIRST BLOCK </div> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> SECOND BLOCK </div> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> THIRD BLOCK </div> </div> </div> 

Answer 3

I found the solution for this. But couldn't update. As bootstrap has it's own class to display the grids, we have to customize the classes according to our requirements. The issue with the question is, making it responsive. Of course media queries should be used. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/