Changing bootstrap grid margins - html

Question

I'm a begginer coder and i'm learning to use bootstrap grid. Although, i didn't quite understand how the container margins work.
I wrote this piece of coding for a website footer and tried using bootstrap grid, but i wanted the social icons to be about 20px to the right and i can't get it. Inspecting the element at google chrome i can see there is a margin right but i can't seem to customize it and make it smaller.
take a look - this is my footer's html code:
<footer>
<div class="row container">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-5">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
Now, this is my CSS code:
footer{
background: url(../img/rodape-background.png);
clear: both;
padding: 50px 0;
}
footer .container{
position: relative;
margin-left: 80px;
box-sizing: border-box;
margin-top: 50px;
}
.logo-rodape {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
display: inline-block;
}
.r-content {
padding: 0;
box-sizing: border-box;
display: inline-block;
text-align: left;
margin-left: 30px;
margin-top: 20px;
}
.slogan-title {
font-family: "avenir next condensed";
font-size: 0.3em;
font-size: calc(0.3em + 1vw);
#include screen-above(800px) {
font-size: 0.4em;
}
font-weight: 600;
letter-spacing: 1.5px;
margin-bottom: -2px;
color: #fff;
}
.slogan-sub {
font-family: 'Lato', sans-serif;
font-size: 0.2em;
font-size: calc(0.2em + 1vw);
#include screen-above(800px) {
font-size: 0.3em;
}
font-weight: 300;
letter-spacing: 1px;
color: #fff;
}
.r-social {
text-align: right;
box-sizing: border-box;
display: inline-block;
margin-top: 40px;
margin-left: 60px;
}
.fa-facebook {
padding-right: 20px;
}
a i.fa:hover {
color: #57cdf7; !important;
}
I'll be really glad with any suggestions, I tried out everything I know so far and couldn't get it right.
Thanks!

Answer 1

I'm assuming that your question means you want the social icons to sit on the FAR right of the screen, not necessarily in the confines of the grid that Bootstrap sets.
You would be messing with the Bootstrap grid to re-define .container like you did, and there are issues that go along with that (as you saw).
The best bet is to create an entirely separate component that you can move to wherever you want, independent of the Bootstrap grid.
HTML
<div class="social-icons">
<ul>
<li>Social Icon</li>
<li>Another Icon</li>
</ul>
</div>
CSS
.social-icons {
position: fixed;
bottom: -10px;
right: -5px;
}
ul {
list-style: none;
}
.social-icons li {
display: inline;
padding-right: 30px;
padding-bottom: 20px;
width: 100px;
}
CodePen
This in particular glues the social icons to the bottom of the page regardless of scrolling. But it gives you an idea of what to do.

Answer 2

First, you are supposed to wrap the whole content inside the container. Container is pre set class in bootstrap to keep your content in the appropriate place with appropriate width on different size screens.
<div class="container">
<footer>
<div class="row">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-6">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
</div> <!--end container-->
Also, the cols should equal to 12. col-md-2 + col-md-4 + col-md-6 = col-md-12.
col-md-12 is the full width of the page.
Here is a good read for you: http://getbootstrap.com/css/
And, what you are seeing in the inspector "margin right by social icons" is padding or the width that is pre set on your container in the bootstrap css.

Answer 3

First, Use row and container Class Separately.
Second, Your cols should equal to 12 as described in bootstrap grid system.
Third, you can also use offsetting columns which increases the left margin. example is given below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"></script>
</head>
<footer>
<div class="container ">
<div class="row ">
<div class="col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class=" col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class=" col-md-3 col-md-offset-3">
<i class="fa fa-home fa-2x" aria-hidden="true" ></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</footer>