For my Bootstrap 4 alpha 5 project:
I am experimenting with using the .container-fluid class on HTML elements that are not divs. However, I have noticed a change in output when applying it to non-div elements. My main objective is to create custom CSS for specific HTML elements within my application to define things like an application body or header, which I can style once and reuse throughout, reducing redundancy in my CSS code and improving the readability of my HTML.
Below are four tests I conducted:
- Standard approach using a div with
class="container-fluid": - Using an element named "test-body" with
class="container-fluid": - Utilizing SASS / Grunt generated CSS with @include make-container()
- Implementing SASS / Grunt generated CSS with @extend
.container-fluid
<div class="container-fluid mt-1 mx-2">
<div class="row">
<div class="col-xs-6 text-white bg-danger">regular div Left</div>
<div class="col-xs-6 text-white bg-danger text-xs-right">regular div Right</div>
</div>
</div>
<test-body class="container-fluid mt-1 mx-2">
<div class="row">
<div class="col-xs-6 text-white bg-danger">container-fluid attribute Left</div>
<div class="col-xs-6 text-white bg-danger text-xs-right">container-fluid attribute Right</div>
</div>
</test-body>
<!-- For the next two examples, see the -->
<!-- SCSS source code and compiled CSS lower in the post -->
<pm-body class="mt-1 mb-3 mx-2">
<div class="row pm-decoration">
<div class="col-xs-6">Sass @include make-container() Left</div>
<div class="col-xs-6 text-xs-right">Sass @include make-container() Right</div>
</div>
</pm-body>
<pm-header class="mt-1 mb-3 mx-2">
<div class="row pm-decoration">
<div class="col-xs-6">Sass @extend Left</div>
<div class="col-xs-6 text-xs-right">Sass @extend Right</div>
</div>
</pm-header>Click the link below to view the output from this code:
The only working example as expected is the one using a DIV element. It seems that margins are respected only when the container is wrapped in a DIV. Whether $enable-flex is enabled or not, the output remains consistent in this regard.
Even if the answer turns out to be "you can't achieve that," I am keen on understanding the academic reasoning behind this. There appears to be no discernible difference other than the absence of a native HTML DIV surrounding the CSS class.
REFERENCE FOR THE LAST TWO TESTS:
In the last two tests, you'll find the SCSS source code alongside the compiled CSS output after running it through Grunt. The color coding served as a validation tool to ensure correct SASS compilation and usage, with a focus on @extend and @include functionalities. See below:
SCSS for the @Include make-container:
pm-body{
@include make-container();
.pm-decoration{
background-color: $pm-row-header-background;
color: $pm-row-header-color;
font-weight: bold;
}
}
CSS output from the @include make-container:
pm-body {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
pm-body::after {
content: "";
display: table;
clear: both;
}
pm-body .pm-decoration {
background-color: #DDE5FF;
color: #6699FF;
font-weight: bold;
}
SCSS from the @extend .container-fluid:
pm-header{
@extend .container-fluid;
.pm-decoration{
background-color: $pm-app-border-blue;
color: BLACK;
font-weight: bold;
}
}
CSS output from the @extend .container-fluid:
.container-fluid, pm-header {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container-fluid::after, pm-header::after {
content: "";
display: table;
clear: both;
}
pm-header .pm-decoration {
background-color: #BBCCFF;
color: BLACK;
font-weight: bold;
}