CODEWITHSUNDEEP
htmlcsstwitter-bootstrappadding
Joci93
Joci93

Reputation: 833

How to make equal padding in row with Bootstrap?

I want to create equal padding with all div under the .slideshow div. The problem is the last div right padding.

Now looks like this:

enter image description here

I want this, just with equal padding / space between divs and equal img heights:

enter image description here

The code:

HTML:

    <div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="product-container">
                <div class="slideshow">
                    <p>Test message, Test message</p>
                </div>

                <div class="col-sm-3 col-md-3 col-lg-3">
                    <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">                    
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">                    
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.product-container{
    padding: 0px 9%;
}
.slideshow{
    background-color: #efeff1;
  border: 1px solid #c5c5c7;
  overflow: hidden;
}
.product-container img{
    width:100%;
}
.col-lg-3{
    padding-right:12px;
    padding-left:0px;
}

Fiddle: Fiddle

Upvotes: 4

Views: 2849

Answers (6)

Anubhav pun
Anubhav pun

Reputation: 1323

Try:

remove

.col-lg-3{
 padding-left:12px;
 padding-right:0px;
}

add

.product-container .col-lg-3
{
padding-left:0px;
padding-right:0px;
}

Upvotes: 0

Steevan
Steevan

Reputation: 826

You can give padding-right:0px; and you will get wat you want.

http://jsfiddle.net/52VtD/12070/

.col-lg-3{
    padding-right:0px;
    padding-left:0px;
}

Upvotes: 0

mjroodt
mjroodt

Reputation: 3313

I used the last-child selector. "Bla" is a class I added to the divs in question

.bla:last-child{
   padding-right:0px ;

}

Had some issues with the height but used display: flex; to deal with that.

This wont work well in older browsers

http://jsfiddle.net/52VtD/12065/

Upvotes: 1

vanburen
vanburen

Reputation: 21663

Is this what you're trying to acheive?

.product-container {
    padding: 0 2px 6px 2px;
    overflow: hidden;
}
.slideshow {
    background-color: #efeff1;
    border: 1px solid #c5c5c7;
    padding-left: 20px;
}
.product-container img {
    width: 100%;
}
.product-container .pads {
    padding: 0px 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="col-lg-12">
    <div class="product-container">
      <div class="row">
        <div class="slideshow">
          <p>Test message, Test message</p>
        </div>
        <div class="col-sm-3 col-md-3 col-lg-3 pads">
          <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
        </div>
        <div class="col-sm-3 col-md-3 col-lg-3 pads">
          <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
        </div>
        <div class="col-sm-3 col-md-3 col-lg-3 pads">
          <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
        </div>
        <div class="col-sm-3 col-md-3 col-lg-3 pads">
          <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

melc
melc

Reputation: 11671

If the right padding is removed it will have the result you are looking for.

http://jsfiddle.net/0rm0h547/light/

http://jsfiddle.net/0rm0h547/show/

css

.continuous {
    padding-right: 0px;
}

html

..
<div class="col-sm-3 col-md-3 col-lg-3 continuous">
                    <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">                    
                </div>
..

Add an extra css class that removes padding-right.

Upvotes: 0

Morpheus
Morpheus

Reputation: 9065

Just wrap all your image containing divs in additional .row:

<div class="row">
    <div class="col-sm-3 col-md-3 col-lg-3">
        <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">                    
    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">
        <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">
        <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">                    
    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">
        <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
    </div>
</div>

And remove unnecessary styling:

.col-lg-3{
    padding-right:12px;
    padding-left:0px;
}

Also, you don't need to repeat responsive classes for all devices:

<div class="col-sm-3 col-md-3 col-lg-3"></div>

Can be written:

<div class="col-sm-3"></div>

Updated fiddle

Upvotes: 2

Related Questions