CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
poo-11
poo-11

Reputation: 11

Center last column(s) in Bootstrap 3

I have random numbers of columns (generated by FOR loop). 

  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
    </div>
  </div>

I would like to center last row of columns. By default very last 1 or 2 columns are aligned to left. Is there any way to center them easily, or shall I skip using "col-" and use flexbox instead?

Source: CODEPEN.IO

Upvotes: 1

Views: 1022

Answers (3)

EarnP
EarnP

Reputation: 19

Add this to the 4th div like so <div class ="col-sm-offset-2>

Upvotes: -1

Ferhat
Ferhat

Reputation: 21

You can add flex style to the parent of your column, which is .row here in this example.

.mycol {
  background: tomato;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

.row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
        <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
            <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
            <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
    <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
  </div>
</div>

Upvotes: 2

Ranjith v
Ranjith v

Reputation: 1062

try like this.. i added align-center class to display center div

html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row align-center">
    <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
        <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
            <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
            <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
    <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
  </div>
</div>

css

.mycol {
  background: tomato;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
}
.align-center{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

Upvotes: 1

Related Questions