Twitter Bootstrap Question posted in

Center three col-md-3 columns in Bootstrap 4-Twitter bootstrap

Is there a way to have three col-md-3 columns and center them. Offset doesn’t work, because I’d have to offset the first column for a column and a half. So is there another way to do this?

Here’s the outline of the code:

.col-md-3 {
  background-color: #e2e2e2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-3">First column</div>
    <div class="col-md-3">Second column</div>
    <div class="col-md-3">Third column</div>
  </div>
</div>

The answers I managed to find on SO were all related to Bootstrap 3 and lower. And didn’t work with Bootstrap 4. Can someone take a look and let me know?

Tags:

3

Answers


  1. 0

    Yes

    Apply justify-content:center to the row.

    As indicated BS4 has their own class for this .justify-content-center

    .col-md-3 {
  background-color: #e2e2e2;
}

.row {
  justify-content:center;
}
/* or apply the class "justify-content-center" to the row */
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-3">First column</div>
    <div class="col-md-3">Second column</div>
    <div class="col-md-3">Third column</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    The Flexbox utility classes are your friend.
    You can use justify-content-center on .row in this case.

    .row {
    background-color: lavender;
}

.col-md-3 {
    background-color: gray;
}
    <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-3">First column</div>
        <div class="col-md-3">Second column</div>
        <div class="col-md-3">Third column</div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
    Login or Signup to reply.
  3. 0

    how about flex:

    <div class="container">
        <div class="d-flex justify-content-center">
            <div class="col-md-3">First column</div>
            <div class="col-md-3">Second column</div>
            <div class="col-md-3">Third column</div>
        </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search