Twitter Bootstrap Question posted in

Twitter's Bootstrap, right/left column margin's uneven-Twitter bootstrap

I am trying to make 2 columns with an image in each and although the 2 images are the exact same size, I noticed that they have uneven right/left margins, the left one is slightly larger, how can I fix this?

HTML:

<div class="container">
    <div class="row">
        <div class="col col-lg-6">
            <img src="logo.jpg">
        </div>
        <div class="col col-lg-6">
            <img src="profile.jpg">
        </div>
    </div>
</div>

CSS:

.container img {
    width: 35em;
    height: 35em;
}
Tags:

2

Answers


  1. 0

    It is because you have applied width to the img tag. you can fix this by setting the width to 100%.

    when image size is larger than the width of the div image overflow. And the div tag that contain the img tag, have left and right padding. if the image’s width is larger than div width image will overflow. and even if you set overflow to hidden image will show to the innerWidth of the div.

    Making the img width 100% will make the image remain in the div.

    Hope this solves your problem.

    Login or Signup to reply.
  2. 0

    Since I don’t have enough reputation to comment, I will answer your question that you asked in the comment section below HasithaC’s answer.

    First of all, like what HasithaC said, give your image a width: 100% so that the image will remain in the div.

    You mentioned in the comment that the images don’t stack on top of each other when resized. It’s because you inserted col alongside with col-lg-6. col-lg-6 stands for “column-large-6”, which will create 6 columns layout when the screen size is 992px or above. If the col classes weren’t alongside with col-lg-6 in the first place, the images (columns to be exact) will stack on top of each other when the screen size is below 992px,1 but the col class is there, so it will then take over to style your div when the screen size is 992px below as col-lg-6 is meant for 992px or above. Moreover, col has a flex-grow: 1. According to CSS-Trick:

    This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.

    You have two col in the same row and both of them have flex-grow: 1, so they will have the same width, but they won’t stack on top of each other because there are no media queries controlling it, unlike col-lg-6 which is only meant for screen size 992px or above. Remove col will solve the problem.

    Jsfiddle example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search