Twitter Bootstrap Question posted in

4 columns in a row using Twitter Bootstrap

I am trying to get 4 columns in a row.

Code:

<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
  <div class="row">
    <div class="home-banner">
      <div class="col2 col-xs-12 col-sm-4 col-md-4">
        <p class="img3">
          <a href="#">
            <img class="top" src="/img/cms/banner1_hover.jpg" alt="" />
            <img class="bottom" src="/img/cms/banner1.jpg" alt="" />
          </a>
        </p>
      </div>
      <div class="col2 col-xs-12 col-sm-4 col-md-4">
        <p class="img3">
          <a href="#">
            <img class="top" src="/img/cms/banner2_hover.jpg" alt="" />
            <img class="bottom" src="/img/cms/banner2.jpg" alt="" />
          </a>
        </p>
      </div>
      <div class="col2 col-xs-12 col-sm-4 col-md-4">
        <p class="img3">
          <a href="#">
            <img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
            <img class="bottom" src="/img/cms/banner3.jpg" alt="" />
          </a>
        </p>
      </div>
      <div class="col2 col-xs-12 col-sm-4 col-md-4">
        <p class="img3">
          <a href="#">
            <img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
            <img class="bottom" src="/img/cms/banner3.jpg" alt="" />
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

But i only get 3 columns, the last image jumps into to next row. Can somebody point me into the right direction ?
Thanks

Tags:

4

Answers


  1. 0

    Replace col-sm-4 and col-md-4 with col-sm-3 and col-md-3. Twitter Bootstrap is a 12 column grid system and hence 4+4+4+4= 16 will push the last column to next row.

    <div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
  <div class="row">
    <div class="home-banner">
      <div class="col2 col-xs-12 col-sm-3 col-md-3">
        <p class="img3">
          <a href="#">
            <img class="top" src="/img/cms/banner1_hover.jpg" alt="" />
            <img class="bottom" src="/img/cms/banner1.jpg" alt="" />
          </a>
        </p>
      </div>
      <div class="col2 col-xs-12 col-sm-3 col-md-3">
        <p class="img3">
          <a href="#">
            <img class="top" src="/img/cms/banner2_hover.jpg" alt="" />
            <img class="bottom" src="/img/cms/banner2.jpg" alt="" />
          </a>
        </p>
      </div>
      <div class="col2 col-xs-12 col-sm-3 col-md-3">
        <p class="img3">
          <a href="#">
            <img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
            <img class="bottom" src="/img/cms/banner3.jpg" alt="" />
          </a>
        </p>
      </div>
      <div class="col2 col-xs-12 col-sm-3 col-md-3">
        <p class="img3">
          <a href="#">
            <img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
            <img class="bottom" src="/img/cms/banner3.jpg" alt="" />
          </a>
        </p>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Just apply the col-sm-3, col-md-3 class on columns instead of col-sm-4, col-md-4.

    <div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><a href="#"><img class="top" src="/img/cms/banner1_hover.jpg"    alt="" /> <img class="bottom" src="/img/cms/banner1.jpg" alt="" /></a></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><a href="#"><img class="top" src="/img/cms/banner2_hover.jpg"  alt="" /> <img class="bottom" src="/img/cms/banner2.jpg" alt="" /></a></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><a href="#"><img class="top" src="/img/cms/banner3_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner3.jpg" alt="" /></a></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><a href="#"><img class="top" src="/img/cms/banner3_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner3.jpg" alt="" /></a></p>
</div>
</div>
</div>
</div>
    Login or Signup to reply.
  3. 0

    Try this

    <div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><a href="#"><img class="top" src="/img/cms/banner1_hover.jpg"    alt="" /> <img class="bottom" src="/img/cms/banner1.jpg" alt="" /></a></p>
</div>
    Login or Signup to reply.
  4. 0

    The Bootstrap grid is split up into 12 columns. Divide 12 by the number of columns you want, and you will get the number for that class.

    For example, 12 divided by 4, is 3. So your classes should be col-sm-3 and col-md-3.

    https://getbootstrap.com/examples/grid/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search