What is a Container?
A container can are used to place content together with same font-color, background-color, font-size, font-family, and so on. Adding a padding of 0px 20px to the div, section, article, footer, header and so on. All the elements inside this class share the same font-size, font-color, padding, alignment, and so on.
<div class="container">
<header class="container yellow-bg pad-4 text-grey text-bold text-center">
Hello i am a header container, inside another container! </header>
<div class="container pad-4 text-center text-white grey-bg">
I am another container, i serve as the body.
</div>
<footer class="container brown-bg pad-4 text-grey text-bold text-center">
i am the footer container also in a container!
</footer>
</div>
As you can see container class is the perfect class to use for all HTML container elements like:
<div>, <article>, <section>, <header>, <footer>, <form>, and more.
Another Example
My site is simple, beautiful and nice. Welcome to it. I don't have a name for it yet.
Suggest for me.
<div class="container purple-to-orange-bg pad-10 text-white">
<span class="h4 text-float-left">welcome to my site</span>
<span class="h4 text-float-right"><i class="fas fa-user"></i></span>
</div>
<div class="container maroon-to-red-bg pad-10 text-white">
<center>
<img src="https://cdn-icons-png.flaticon.com/512/4383/4383972.png" class="large-img">
<p>My site is simple, beautiful and nice. Welcome to it. I don't have a name for it yet.
<br>Suggest for me.</p>
</center>
</div>
<div class="container purple-to-orange-bg pad-10 text-white">
<center>
2022 © Stylet on my site.
</center>
</div>
Container Fluid
Stylet also offers another type of container called container-fluid. Container fluid adds a padding of 15px to the left and right. It gives a width of 100% to the div, section, article, footer, header and so on. All the elements inside this class share the same font-size, font-color, padding, alignment, etc.
You can use either one of them : container class or container-fluid class.
More Examples
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="container header dark-bg text-white text-bold pad-5">
<a href="javascript:void(0)">
Home</a>
<div class="text-float-right">
<a href="javascript:void(0)">
Login</a>
<a href="javascript:void(0)">
Signup</a>
</div>
</div>
<div class="container lavenderblush-bg pad-4 mar-top-0">
<div class="flex">
<div>
<img src="https://cdn-icons-png.flaticon.com/512/4105/4105448.png" class="large-img">
</div>
<p class="text-grey pad-left-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<button class="button royal-blue-to-blue-bg full-button text-white">
Join</button>
</p>
</div>
</div>
<div class="container dark-bg pad-5 text-center ">
<span class="text-white">2022 © Stylet on work with us. </span>
</div>
"javascript:void(0)" in our link to avoid the page to refresh. It is better to use it than "#".