CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kevin Ferm
Kevin Ferm

Reputation: 111

bootstrap row full width

Alright, so I'm using Bootstrap and I'm wanting a row with span 3, it's looking like this:

<div id="container">
<div class="row">
    <div class="span3">
            <h5><b>Resources</b></h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>

    <div class="span3">
      <h5><b>Multiplayer</b></h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    <div class="span3">
      <h5><b>Create your own cards!</b></h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    <div class="span3">
      <h5><b>Default decks</b></h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </div>
  </div>

The problem is, though, that the span and row classes follow the width of the container, so it's always full width, so instead of listing next to eachother, it just stacks, it's like I only used 4 paragraph tags and nothing else.

I'm not sure why it's doing that, but I'm pretty sure that's wrong, either way, how do I get it to act like it should?

Upvotes: 0

Views: 244

Answers (4)

Leyu
Leyu

Reputation: 2687

Instead of <div class="row"> use <div class="row-fluid"> span classes under row-fluid use dynamic width (percentages instead of fixed pixels).

Upvotes: 0

t_sperry
t_sperry

Reputation: 28

Are you using Bootstrap 3 ?

This is formatting for grid of large sizes i.e. desktop size windows.... Try changing your class to col-lg-3

.col-md, .col-sm, and .col-xs are for various container widths...

        <div class="container">
          <div class="row">
            <div class="col-lg-3">
              <h5><b>Resources</b></h5>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>

            <div class="col-lg-3">
              <h5><b>Multiplayer</b></h5>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>
            <div class="col-lg-3">
              <h5><b>Create your own cards!</b></h5>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>
            <div class="col-lg-3">
              <h5><b>Default decks</b></h5>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>
          </div>
        </div>

Upvotes: 1

Marshall Rogers
Marshall Rogers

Reputation: 9

<!DOCTYPE html>
<html>

<style>
.row > .span3
{
    display: inline-block;
    width: 20%;
    margin: 0;
    padding: 0;
}
</style>

</head>
<body>
<div id="container">
<div class="row">
<div class="span3">
<h5><b>Resources</b></h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<div class="span3">
<h5><b>Multiplayer</b></h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="span3">
  <h5><b>Create your own cards!</b></h5>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="span3">
<h5><b>Default decks</b></h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>

hope this helps

Upvotes: 0

suther
suther

Reputation: 13628

First of all, i recommend to use Bootstrap3. There are new classes which have Device-Dependencys for Responsive Design.

So if you want to have an 3 Col width div only encapsulate it like this:

<div id="container">
<div class="row">
<div class="span3">    
<div class="span12">
            <h5><b>Resources</b></h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>

    <div class="span12">
      <h5><b>Multiplayer</b></h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    <div class="span12">
      <h5><b>Create your own cards!</b></h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    <div class="span12">
      <h5><b>Default decks</b></h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </div>
  <div class="span9">right colomn</div>
  </div>
  </div>

If that was not what you need, try to explain your needs better.

If you want to show the 3 divs beside each other, encapsulate them all into an span12.

Upvotes: 0

Related Questions