Bootstrap container changes layout?


#1

Hi everyone,

i tried some small things with bootstrap outside the exercises. What i found was, that the bootstrap container has some unwanted effects on my layout:

<div class="container-fluid" style="background-color: #1abc9c">
    <div class="row">
    	 <div class="col-md-5">
        	<img src="putzen.jpg">
        </div>

If I use the code like this, the img in the file appears like it has a left padding of around 10px. I but want it, to show at exactly the left corner of my site. It shows correctly, if i dont wrap it into a container or container-fluid. But once i wrap it into a container it moves about 10px to the right again.

Anyone know how to fix this?


#2

you can simple overwrite the padding of the container:

.container,.container-fluid {
  padding: 0;
}

be careful, this will overwrite padding for all containers, you might want to add another class/id to overwrite just for this specific container


#3

Does overwriting the padding interfere with its responsiveness?


#4

no, it doesn't. The row + plus the cols is the grid system which makes it responsive, don't temper with that unless you know what you are doing, temperiing with the container padding is fine