CODEWITHSUNDEEP
cssbootstrap-4containers
glez
glez

Reputation: 1214

Use of Bootstrap Container

I have a question about which is the best way to use containers under Bootstrap. I have 4 options below as an example and would like to know which is the better way to approach using containers. Are the differences just style over substance? Does the order that classes are specified matter and if so what order is best, localy defined first or last?

<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

.section-1
{
    background-color: #2f5571;
    font-size: 20px;
    text-align: center; 
    color: #fdfcfc;
    font-family: 'Lato', sans-serif;
    padding: 20px 20px; 
    margin-top: 20px; 
}

</style>


<div class="section-1">
    <p>Some text 1</p>
</div>


<div class="section-1 container">
    <p>Some text 2</p>
</div>


<div class="container section-1">
    <p>Some text 3</p>
</div>


<div class="section-1">
    <div class="container">
        <p>Some text 4</p>
    </div>
</div>

Upvotes: 1

Views: 2182

Answers (2)

IvanS95
IvanS95

Reputation: 5742

The use of Bootstrap's container is mostly based on the type of layout you want to create, and how you want properties to apply to your main elements.

On your example:

Option #1 does not use containers, so it will not benefit at all from its main appeal which is centering content

Option #2 and Option #3 are the same since class order should not have any effect on your markup.

Option #4 Can be used if you only want to center content, but keep other elements using the full available width, particularly helpful if you want sections to have different background colors for example but keeping the content in the center, like this:

enter image description here

The last option you have is to use .container on a global div or section so that ALL the content on your page stays centered.

Also, if you use container-fluid, the container will expand to use the full viewport width, which might be wanted for some layouts, as well as not working particularly well with others when the screen is too wide, ending up looking like this:

enter image description here

Upvotes: 3

Drefetr
Drefetr

Reputation: 412

Option #1 does not make use of the the container/grid system -- https://getbootstrap.com/docs/4.1/layout/overview/ -- so in the context of the correct usage of Bootstrap's libraries (specifically containers) -- it's a poor option.

The order in which the CSS selectors are applied should not make any difference (according to W3C specs.):

https://www.w3.org/TR/selectors/#specificity

Meaning that options #2 & #3 are functionally identical.

As for how you should utilise Bootstrap's 'container' class -- It depends on what sort of layout you wish to achieve --

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time) [...]

Generally, the content(s) would be placed inside the container, for example:

<div class="container">
    <!-- Content here. -->
</div>

Which I suppose, would be option #5.

Upvotes: 4

Related Questions