html proof and footer on the bottom - html

Question

I'm pretty new with bootstrap and css. Firstly, I would like to know if the code I wrote is correct. Working with more containers is fine? I use fluid containers for header and footer (width 100% vw), and a standard container for the contents.
Secondly, I m not sure what is the best way to code my footer. I need it on the bottom of the page, but not fixed with absolute position (I dont want it fixed in the browser window).
I tried different solutions without succeding. Shall I nest all my containers in another one?
Thank you so much, and sorry if I didn't explain perfectly or I missed anything.
<div class="container">
<div class="row">
<div clas="col-xs-12">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand no_margins">
<img src="images/logo.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">
About
</a>
</li>
<li>
<a href="#">
Works
</a>
</li>
<li>
<a href="#">
News
</a>
</li>
<li>
<a href="#">
Contacts
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- close container navbar-->
<!-- header -->
<div class="container">
<div class="row">
<header class="col-xs-12 static_header">
<div class="row">
<div class="col-xs-12 col-sm-3 hidden-xs logo_header">
<img src="images/logo_header.png" />
</div>
<div class="col-xs-12 col-sm-9 title_header">
<h1>
My Title
</h1>
</div>
</div>
</header>
</div>
</div>
<!-- end header -->
<!-- content -->
<div class="container">
<div>
<div class="row">
<div class="col-xs-12" id="content_box">
<h2>
About
</h2>
<p>
my text
</p>
​
</div>
</div>
</div>
</div>
<!-- end content -->
<footer class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 contact_footer">
info#site.com<br>
[phone]
</div>
<div id="footer_social_bar" class="col-xs-12 col-sm-4">
<img src="images/fb.png"/>
<img src="images/linkedin.png"/>
<img src="images/twitter.png"/>
</div>
<div class="col-xs-12 col-sm-4 copyright">
© 2017, company
</div>
</div>
</div>
</div>
</div>
</footer>

Answer 1

If you're concerned about viewers using a screen that is far bigger than the content you have in your website, you can use the following css to make sure that the site is at least as big as their browser.
html{
height:100%;
}
body{
min-height:100%;
background-color:#0C0;
}
<p>I only have a small amount of content. But the body background-color is as big as the screen</p>