Bootstrap container changes layout?

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">

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?

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

1 Like

Does overwriting the padding interfere with its responsiveness?

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

1 Like