CODEWITHSUNDEEP
gridtwitter-bootstrap-3
skube
skube

Reputation: 6175

Bootstrap 3.0 handling edge bleeds - adjusting the gutter

I'm trying to figure out how to create content that bleeds from one edge of the viewport within Bootstrap 3's column grid for small devices but not others. I want the images to go past the gutter. I understand if you want full width content, you put it inside .container-fluid. But what if you want it to bleed from the browser edge for smaller devices and not for larger ones?

<div class="container-flud">
 <img src="holder.js/100x100" alt="This img ALWAYS bleeds from left edge">
</div>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="holder.js/100x100" alt="This img always has 15px left-padding">
    </div>
    <div class="col-md-6">Lorem ipsum dolor</div>
  </div>
</div>

I don't have much experience with grid systems or Bootstrap in particular. Bootstrap seems great for designs with constant padding throughout break points. However, when that padding has to change or be non-existent I get confused as to how it's supposed to work. What am I missing?

edit: clarified question

Upvotes: 2

Views: 3902

Answers (4)

skube
skube

Reputation: 6175

I think I've figured it out (at least in my head). Basically, it's easy to bleed images and content for extra small devices (<768px) and not other sizes by simply omitting the col div:

<div class="container">
  <div class="row">
    <img src="holder.js/100x100" alt="img flush on left edge for xs devices">
  </div>
</div>

Bootstrap will auto width the container at viewport sizes less than 768px.

Unfortunately, I still don't have a solution to bleed for tablets (and not for desktops).

Upvotes: 0

Christina
Christina

Reputation: 34652

Both answers, so far, are good to learn by. One thing is to better understand CSS and look at the grid css. The grid uses padding to make the gutters. The default is 15px on the left and right and then the .row has a negative left and right margin equal to this padding. You want to have content, such as an image, flush against the other columns, but maintain the percentage sizing. Just fiddle with the row and col-*- padding and margin and stick them inside or outside a .container or .container-fluid depending on your need:

Note this is more elaborate as it has nested rows, it's to learn from.

DEMO: http://jsbin.com/yigomo/1

/* Flush Grid */
.row.flush-grid img {
    width: 100%;
    height: auto;
    float:left;
}
.row.flush-grid {
    margin-left: 0;
    margin-right: 0;
}
.row.flush-grid [class*="col-"] { padding:0;}
.row.flush-grid [class*="col-"].row { padding:0;margin:0;}

HTML

  <div class="col-sm-6">
    <img src="http://lorempixel.com/600/400/fashion" alt="">
  </div>

  <div class="col-sm-6 row">
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/nature" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/food" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/cats" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/business" alt="" ></div>
  </div>

</div><!--/.row.flush-grid -->

<div class="row flush-grid">
  <div class="col-sm-6 row">
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/animals" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/city" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/people" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/sports" alt="" ></div>
  </div><!--/.row.flush-grid -->

  <div class="col-sm-6">
    <img src="http://lorempixel.com/600/400/transport" alt="">
  </div>

</div><!--/.row.flush-grid -->

Upvotes: 0

jme11
jme11

Reputation: 17387

Containers have 15px padding left/right (both .container and .container-fluid), which is offset by your row which has negative 15px of margin left and right. So, to remove padding from a specific column, you can create a class such as:

.no-left-padding {
  padding-left: 0px;
}

HTML:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 no-left-padding">
      <img src="holder.js/100x100" alt="This will have 15px padding on the right and no padding on the left">
    </div>
    <div class="col-md-6">Lorem ipsum dolor</div>
  </div>
</div>

Upvotes: 1

cvrebert
cvrebert

Reputation: 9289

If you want full-width content, you want to use container-fluid instead of container.

Upvotes: 3

Related Questions