CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mark
Mark

Reputation: 21

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

Upvotes: 2

Views: 390

Answers (4)

Lee
Lee

Reputation: 4323

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/

Upvotes: 0

akash
akash

Reputation: 2157

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>

Upvotes: 1

Rahul Kumar
Rahul Kumar

Reputation: 154

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>

Upvotes: 4

m4n0
m4n0

Reputation: 32345

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>

Upvotes: 3

Related Questions