CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrap
breakslow_
breakslow_

Reputation: 51

White space left and right around images when using bootstrap col

I have a row with 3 images.
Image left has white space on the left side.
Image right has white space on the right side.

How can I fix this so I don't have any with space on the left and right side?

See my code below:

The background is orange in the image so it's better visible.

HTML:

<div class="container section">
  <div class="row">
    <div class="col-md-offset-1 col-md-10 featured">

      <div class="col-md-4 img-featured-1">
        <%= image_tag("featured-1.jpeg", class: "img-responsive") %>
      </div>
      <div class="col-md-4 img-featured-2">
        <%= image_tag("featured-2.jpeg", class: "img-responsive") %>
      </div>
      <div class="col-md-4 img-featured-3">
        <%= image_tag("featured-3.jpeg", class: "img-responsive") %>
      </div>

    </div>
  </div>
</div>

CSS:

.featured {
  background-color: orange;
}
.img-featured-1 {
  width: 33.33333%;
  float: left;
}
.img-featured-2 {
  width: 33.33333%;
}
.img-featured-3 {
  width: 33.33333%;
  float: right;
}

See the image

Upvotes: 0

Views: 2315

Answers (3)

Jamdev
Jamdev

Reputation: 552

Try this:

.featured {
  background-color: orange;
}

 .nopadding {
  padding:15px 0px;}

+

<div class="container section">
  <div class="row">
    <div class="col-md-offset-1 col-md-10 nopadding">

      <div class="col-md-4 img-featured-1">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
      </div>
      <div class="col-md-4 img-featured-2">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
      </div>
      <div class="col-md-4 img-featured-3">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
      </div>

    </div>
  </div>
</div>

Upvotes: 1

Dan Mayor
Dan Mayor

Reputation: 105

Couple things, first thing is your style sheet. It should be .img-featured-1 (the dot defines this style applies to classes of the given name).

Next, if that doesn't resolve, check your themes style sheet and or override the margin and padding with { margin: 0 !important; padding: 0 !important; }

Finally, make sure your images themselves don't have white / transparent space.

Upvotes: 0

Linus Aronsson
Linus Aronsson

Reputation: 341

It's probably because the .row class is adding some margin on the sides.

Try this:

.row {
   margin: 0;
 }

Upvotes: 0

Related Questions