CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Greg
Greg

Reputation: 3063

Align bootstrap columns

On my website (team section) I have something like this 6x :

      <div class="row">
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url(../images/female-employee.png)">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>

The issue is that I don't know how to align the last 2 ones to the middle of the bag, like on the illustration below.

How can I achieve this?

Many thanks, enter image description here

Upvotes: 1

Views: 58

Answers (2)

Aditya Singh
Aditya Singh

Reputation: 16650

You can use flex-box for last row as below:

<div class='row'>
   <div class="team-member align-center">
      <div class="image" style="background-image:url(../images/female-employee.png)">
      </div>
      <p class="name">Jane Doe</p>
      <p class="position">Sells</p>
    </div>
    <div class="team-member align-center">
      <div class="image" style="background-image:url(../images/female-employee.png)">
      </div>
      <p class="name">Jane Doe</p>
      <p class="position">Sells</p>
    </div>
</div>

and add the class align-center as below:

.align-center {
  display: flex;
  justify-content: space-around;
}

Upvotes: 0

BENARD Patrick
BENARD Patrick

Reputation: 30975

Here is a bootply: http://www.bootply.com/oTea5I7wZX

On the last row with offseting columns :

        <div class="row">

            <div class="col-xs-6 col-md-4 col-md-offset-2">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
          </div>

            <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
          </div>
          </div>          
</div>

Full HTML

      <div class="container">
        <div class="row">
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      </div>

        <div class="row">

            <div class="col-xs-6 col-md-4 col-md-offset-2">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
          </div>

            <div class="col-xs-6  col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
          </div>
          </div>          
</div>

Upvotes: 2

Related Questions