CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Shah Zeb
Shah Zeb

Reputation: 21

Center bootstrap columns

I have used this code to create 4 columns in Bootstrap

<div id="col" class="container-fluid row">
  <div class="col-md-3">
    <center>
      <h4>Our Story</h4><img src="box.png" />
    </center>
  </div>
  <div class="col-md-3">
    <h4>Our Story</h4><img src="box.png" />
  </div>
  <div class="col-md-3">
    <h4>Our Story</h4><img src="box.png" />
  </div>
  <div class="col-md-3">
    <h4>Our Story</h4><img src="box.png" />
  </div>
</div>

now these columns are aligned horizontally on desktop screen but when I open in mobile then all columns gets align vertically on the left side so I want to make them align center, how can I achieve that?

Upvotes: 0

Views: 601

Answers (1)

dippas
dippas

Reputation: 60563

This is so wrong in many ways:

  • don't use center tag it is deprecated, use .text-center from bootstrap instead

  • .row must be child of .container

  • if you need to style for mobile you have to use class xs

See more info about bootstrap documentation

Because it is not clear what you are trying to achieve in your mobile view here 2 snippets:

Snippet #1 - 4 columns horizontal all devices

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="col" class="container-fluid">
  <div class="row text-center">
    <div class="col-xs-3">
        <h4>Our Story</h4>
        <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
  </div>
</div>

Snippet #2 - 4 columns vertical mobile / 4 columns horizontal small devices and up

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="col" class="container-fluid">
  <div class="row text-center">
    <div class="col-xs-12 col-sm-3">
        <h4>Our Story</h4>
        <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-12 col-sm-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-12 col-sm-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-12 col-sm-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
  </div>
</div>

Upvotes: 5

Related Questions