Pumizo Pumizo - 7 months ago 17
HTML Question

How can I change 5 to 4 columns and keep them centred in HTML?

I'm editing a bootstrap responsive template to fit my needs. My HTML/CSS knowledge is limited and I'm stuck here:

I need 4 columns (with the 4 first contacts) on the first row and the other 3 (with the remaining 3 contacts) on the 2nd row. Any advice?

P.S - In the end I need them all centred in the page.



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Five columns -->
<div class="row">
<div class="span2 offset1">
<div class="teamalign">
<img class="team-thumb img-circle" src="img/portrait-1.jpg" alt="">
</div>
<h3>Marta Silva</h3>
<div class="job-position">CEO</div>
</div>
<!-- ./span2 -->
<div class="span2">
<div class="teamalign">
<img class="team-thumb img-circle" src="img/portrait-2.jpg" alt="">
</div>
<h3>Eliana Neto</h3>
<div class="job-position">CFO</div>
</div>
<!-- ./span2 -->
<div class="span2">
<div class="teamalign">
<img class="team-thumb img-circle" src="img/portrait-3.jpg" alt="">
</div>
<h3>Carlos Martins </h3>
<div class="job-position">Supervisor Operations</div>
</div>
<!-- ./span2 -->
<div class="span2">
<div class="teamalign">
<img class="team-thumb img-circle" src="img/portrait-4.jpg" alt="">
</div>
<h3>Pedro Correia</h3>
<div class="job-position">HR & Training</div>
</div>
<!-- ./span2 -->
<div class="span2">
<div class="teamalign">
<img class="team-thumb img-circle" src="img/portrait-5.jpg" alt="">
</div>
<h3>Luis Vicente</h3>
<div class="job-position">Iberia Supervisor</div>
</div>
<!-- ./span2 -->
<div class="span2">
<div class="teamalign">
<img class="team-thumb img-circle" src="img/portrait-6.jpg" alt="">
</div>
<h3>Nuno Figueiredo</h3>
<div class="job-position">U.K Supervisor</div>
</div>
<!-- ./span2 -->
<div class="span2">
<div class="teamalign">
<img class="team-thumb img-circle" src="img/portrait-7.jpg" alt="">
</div>
<h3>Ana Veríssimo</h3>
<div class="job-position">Benelux & Germany Supervisor</div>
</div>
<!-- ./span2 -->
</div>




Answer

Yes, you can use this way:

  • Wrap the first row items in .span3s.
  • Wrap the second row items in .span4s.

Use the full screen preview and see for yourself. Let me know if this is what you wanted.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.0/css/bootstrap.min.css">
<div class="container">
  <!-- Five columns -->
  <div class="row">
    <div class="span3">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-1.jpg" alt=""> </div>
      <h3>Marta Silva</h3>
      <div class="job-position">CEO</div>
    </div>
    <!-- ./span2 -->
    <div class="span3">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-2.jpg" alt=""> </div>
      <h3>Eliana Neto</h3>
      <div class="job-position">CFO</div>
    </div>
    <!-- ./span2 -->
    <div class="span3">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-3.jpg" alt=""> </div>
      <h3>Carlos Martins </h3>
      <div class="job-position">Supervisor Operations</div>
    </div>
    <!-- ./span2 -->
    <div class="span3">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-4.jpg" alt=""> </div>
      <h3>Pedro Correia</h3>
      <div class="job-position">HR & Training</div>
    </div>
  </div>
  <div class="row">
    <!-- ./span2 -->
    <div class="span4">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-5.jpg" alt=""> </div>
      <h3>Luis Vicente</h3>
      <div class="job-position">Iberia Supervisor</div>
    </div>
    <!-- ./span2 -->
    <div class="span4">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-6.jpg" alt=""> </div>
      <h3>Nuno Figueiredo</h3>
      <div class="job-position">U.K Supervisor</div>
    </div>
    <!-- ./span2 -->
    <div class="span4">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-7.jpg" alt=""> </div>
      <h3>Ana Veríssimo</h3>
      <div class="job-position">Benelux & Germany Supervisor</div>
    </div>
    <!-- ./span2 -->
  </div>
</div>

Comments