Bootstrap4 container-fluid on non "div" element

Question

Using Bootstrap 4 alpha 5:

I am trying to use the .container-fluid on an html element that is NOT a div. For some reason when it is used on NON-div elements, the output changes. My ultimate goal is to define CSS for application-specific HTML elements to represent something like an application body or a header that I can pre-style and reuse, thereby not maintain multiple instances of the same CSS and also making my HTML more readable.

Here is my testing code with four tests that:

1. Uses the standard approach with a div and class="container-fluid":
2. Uses an element called "test-body" and class="container-fluid":
3. Uses SASS / Grunt generated CSS to call @include make-container()
4. Uses SASS / Grunt generated CSS to @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>

The link below is the output from this code:

Output from above code

The DIV example is the only one that works the way I expect it. It seems like the margins are only respected when the container is hosted on a DIV. I get the same output with and without $enable-flex.

Even if the answer is "you can't do that," from an academic standpoint I'd really like to understand what is going on. There appears to be no quantifiable difference other than not using a native HTML DIV element to host the CSS class.

---

REFERENCE FOR THE LAST TWO TESTS:

For the second two tests, you can see the SCSS source code and CSS output after Grunt grunted it out. The color coding was just to help validate that the SASS compiled properly and was being used...the main point is the @extend and the @include. examples:

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;
}

Answer 1

https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements

<div> is a block level element, so by default it has display: block; as a default display property. When you create a custom element type, it defaults to display: inline; if you do not define a display property for it.

Since the bootstrap css .container-fluid works on the assumption that the element is block-level (ie. <div>), it breaks when you apply it to a non block-level element.

Adding this should solve the issue you're facing:

pm-header {
  display: block;
}