CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JasSy
JasSy

Reputation: 401

Different spacing between images

Using Bootstrap, I am trying to get a larger margin space on the left and right of the screen and a thin space between images. Attempted to individually target images and play around with the margin but that changes the image size and since different images has different margin sizes, the images are not even.

Attempted to target all the images to have the same margin but the gap is too much which is not what I want is there a way around this? Added images to show what I want and what I currently have. My code as follows:

Expected outcome (Large margin left and right, thin margin between images) enter image description here

Current Outcome (No margin left and right, large margin between images) enter image description here

HTMl

    <div class="row">
        <div class="row" class="top-img-custom">
            <div class="text-center col-md-4">
                <img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
            </div>
            <div class="text-center col-md-4">
                <img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
            </div>
            <div class="text-center col-md-4">
                <img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
            </div>
        </div>
    </div>

CSS

.top-img-custom{
    margin-left: 20px;
    margin-right: 20px;
}

Upvotes: 0

Views: 88

Answers (3)

arbuthnott
arbuthnott

Reputation: 3819

This behaviour won't come totally easy to the bootstrap grid system - it is pretty much designed for 15px padding in each of its col- classes, and a negative margin on the containing row classes to compensate at the edges. Messing with those, it is pretty easy to get some accidental element wrapping or horizontal scrollbars.

My approach might be to leave the row and col- classes alone to size themselves, but give the contents of your col- classes a negative margin to fill more of the space. And you would have to be tricky if you didn't want this on the edge elements.

This css should work:

.top-image-custom .img-responsive {
    margin-left: -12px;
    margin-right: -12px;
}

If you don't want this on the edge elements then using some :first-of-type and :last-of-type selectors may help, or assign new classes in your html to differentiate.

Upvotes: 0

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

body{
background-color: #f2f2f2!important;
}
.top-img-custom{
    margin:10px 25px!important;
}
.top-img-custom .text-center{
    padding: 0 1px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

   <div class="row">
        <div class="row top-img-custom" >
            <div class="text-center col-md-4 col-sm-4 col-xs-4">
                <img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
            </div>
            <div class="text-center col-md-4 col-sm-4 col-xs-4">
                <img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
            </div>
            <div class="text-center col-md-4 col-sm-4 col-xs-4">
                <img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
            </div>
        </div>
    </div>

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below CSS

.top-img-custom{
    margin-left: 20px;
    margin-right: 20px;
    padding-left:20px;
    padding-right:20px;
}

.text-center {
    text-align: center!important;
    padding: 1px;
}

img{
  width:100%;
}

https://codepen.io/nagasai/pen/dzNGqv

And as I mentioned before use both classes in one class-

Upvotes: 1

Related Questions