How can I create a full-width background inside a fixed container with bootstrap?

Question

I want to create a full-width background color to go behind a sub-section of one page on my website. Something like the "our values" section on this design where the BG is gray: https://www.w3schools.com/bootstrap/trybs_theme_company_full.htm

My theme declares .container in the header and closes that .container in the footer.

The page I want to edit looks like this

<div class="content-wrap">
<div class="blog-top">test text - no bg color</div>
<!--This is where I want the full-width background color to start-->
    <div id="primary" class="content-area content-area-arch<?php echo $zillah_sidebar_show !== true ? ' content-area-with-sidebar' : ''; ?>">

        <main id="main" class="site-main" role="main">

            <?php zillah_hook_index_top(); ?>

        <?php
            /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
            $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
            query_posts( array ( 'category_name' => 'featured', 'posts_per_page' => 24, 'paged' => $paged) );


            ?>

            <?php
            if ( have_posts() ) :
            while ( have_posts() ) :

                the_post();

                /*
                 * Include the Post-Format-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                 */

                $alternative = $zillah_alternative_layout == true ? $zillah_alternative_layout : '-alternativeblog';
                get_template_part( 'template-parts/content' . $alternative , get_post_format() );

            endwhile;

            the_posts_navigation();

        else :

            get_template_part( 'template-parts/content', 'none' );

        endif;
        ?>

            <?php zillah_hook_index_bottom(); ?>
        </main><!-- #main -->

    </div><!-- #primary -->
    <!--This is where I want the full-width background color to start-->


</div><!-- .content-wrap -->
<?php zillah_hook_index_after(); ?>

I have notated where I want to start the full-width background color. Is there a way to next .container-fluid inside of my .container or is there a suggestion on how I can accomplish this full-width background on this specific sub-section of a custom page in WordPress / bootstrap?

Thanks for any help!

Answer 1

Here is one way to set a full width background color. Use a :before pseudo-element to create an absolutely positioned full width background by setting height:auto and width: 100vw. You can set an image or color background. I'd put the background code in a class so you can attach it to any centered block level element without modifying the dom or Bootstrap grid structure.

-- added html { overflow-x: hidden; } to avoid horizontal scrollbar caused by 100vw background element.

.bg-full {
  position: relative;
}

.bg-full:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX( -50%);
  height: 100%;
  width: 100vw;
  background: red;
}

html {
  overflow-x: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col">
      Row 1
    </div>
  </div>
  <div class="row bg-full">
    <div class="col">
      Row 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      Row 3
    </div>
  </div>
</div>
<div class="container bg-full">
  <div class="row">
    <div class="col">
      Row 4
    </div>
  </div>
</div>