CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user1038814
user1038814

Reputation: 9647

Center bootstrap columns

I'm trying to center my columns in bootstrap, so they are evenly distributed. I have set each column to col-lg-4, so that there are a maximum of 3 columns per row. So, if there are 5 columns, the rows should look like this:

col1      col2     col3
     col4      col5

If there are 4 columns, they should look like this:

col1      col2     col3
          col4

If 2, they should looks like this:

     col1      col2

I hope it makes sense. I've set the enclosing row to display: table and each column to

{ 
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin: auto 0;
}

But for some reason, the columns don't center and are left aligned. Can anyone help please? See inserted code.

.bd-centered { 
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin: auto 0;
}
<!DOCTYPE html>
<html>
    <head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="row">
    <div style="display: table;">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
            <h6 class="text-center breakdown-figures"><span class="glyphicon icon-five text-primary" aria-hidden="true"></span> 70%</h6>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
            <h6 class="text-center breakdown-figures"><span class="glyphicon icon-four text-success" aria-hidden="true"></span> 10%</h6>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
            <h6 class="text-center breakdown-figures"><span class="glyphicon icon-three text-muted" aria-hidden="true"></span> 10%</h6>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
            <h6 class="text-center breakdown-figures"><span class="glyphicon icon-two text-warning" aria-hidden="true"></span> 10%</h6>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
            <h6 class="text-center breakdown-figures"><span class="glyphicon icon-one text-danger" aria-hidden="true"></span> 20%</h6>
        </div>
        </div>
      </div>
    </body>
</html>

Upvotes: 0

Views: 1393

Answers (2)

Arif
Arif

Reputation: 563

Here is what you want Fiddle OUTPUT :

col1      col2     col3
     col4      col5

If there are 4 columns, they should look like this:

col1      col2     col3
          col4 


.bd-centered { text-align: center;
display: flex;
align-items: center;
justify-content: center; 
margin: auto 0;}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script type="text/javascript">
$(document).ready(function() {
  var elem = $("div.col-lg-4").length;
  switch (elem % 3) {
    case 1:
      $(".table div:nth-child(" + elem + ")").removeClass('col-lg-4 col-md-4 col-sm-4 col-xs-4').addClass('col-lg-12 col-md-12 col-sm-12 col-xs-12');
      break;
    case 2:
      $(".table div:nth-child(" + elem + ")").removeClass('col-lg-4 col-md-4 col-sm-4 col-xs-4').addClass('col-lg-6 col-md-6 col-sm-6 col-xs-6');
      $(".table div:nth-child(" + (elem - 1) + ")").removeClass('col-lg-4 col-md-4 col-sm-4 col-xs-4').addClass('col-lg-6 col-md-6 col-sm-6 col-xs-6');
      break;
    default:
      break;
  }

});
</script>
</head>
<body>
  <div class="row">
<div class="table" style="display: table;">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
                            <h6 class="text-center breakdown-figures"><span class="glyphicon icon-five text-primary" aria-hidden="true"></span> 70%</h6>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
                            <h6 class="text-center breakdown-figures"><span class="glyphicon icon-four text-success" aria-hidden="true"></span> 10%</h6>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
                            <h6 class="text-center breakdown-figures"><span class="glyphicon icon-three text-muted" aria-hidden="true"></span> 10%</h6>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
                            <h6 class="text-center breakdown-figures"><span class="glyphicon icon-two text-warning" aria-hidden="true"></span> 10%</h6>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
                            <h6 class="text-center breakdown-figures"><span class="glyphicon icon-one text-danger" aria-hidden="true"></span> 20%</h6>
                        </div>
                        </div>
  </div>
</body>
</html>

Upvotes: 1

Cameron
Cameron

Reputation: 694

I suspect you don't fully understand the bootstrap grid system... Each row is 12 units wide, and you can divide these up as you choose. For example, in your "5-column layout," you're really doing two rows: each column in the first row is 4 units wide and each column in the second row is 6 units wide.

For the 5-column layout, you can do something like this:

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

For the 4-column layout:

<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-12">...</div>

For the 2-column layout:

<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

Upvotes: 2

Related Questions