Achieve consistent padding by using a Boostrap 4 Row inside a container-fluid with padding that matches a regular container

As I work on building a website with bootstrap 4, I've encountered a challenge.

https://i.sstatic.net/eb59f.jpg%60

The layout includes a fluid container setup where the header and footer backgrounds need to extend all the way to the page edges.

Inside the header and footer sections, there is a container for menu items and footer content to ensure everything remains centered.

However, the content between the header and footer needs to function differently. For example, using columns to display varying colors on each side (such as blue and white). The goal here is to align the content with the header and footer elements (ensuring the left edge of the menu in the header lines up with the text content).

I am unsure how to proceed with this task. I attempted overlaying a container on top of the container-fluid but faced alignment issues with the rows.

I have created a code pen showcasing my progress so far.

CSS:

    .rowoverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    bottom: 0;
    right: 0;
    height: 100%;
}

HTML

<div class="container-fluid homepage-text-plugin">

    <div class="row rowoverlay">
        <div class="col-md-12 col-lg-5" style="background-color: green;"></div>
        <div class="col-md-12 col-lg-7" style="background-color: red;">

      </div>

    </div>

    <div class="container ">

        <div class="row">
            <div class="col-md-12 col-lg-4 " style="background-color: blue;">
                A text block
            </div>
            <div class="col-md-12 col-lg-7" style="background-color: yellow;">
                More text<p>
            </div>

        </div>
    </div>

</div>

https://codepen.io/kopite/pen/YQVWQV

htmlcssbootstrap-4

Answer №1

If you want to improve the layout, consider using CSS flexbox. Take a peek at the following code snippet which demonstrates how to achieve a better layout than the one in your poorly-drawn image.

.row-example {
  display: flex;
  background: red;
  width: 100%;
}

.row-1-left {
  width: 300px;
  height: 100px;
  background: blue;
}

.row-1-center {
  display: flex;
  width: 100%;
  height: 100px;
  background: green;
  justify-content: center;
}

.row-1-right {
  width: 300px;
  height: 100px;
  background: yellow;
}

.row-2-left {
  width: 1000px;
  height: 200px;
  background: yellow;
}

.row-2-right {
  justify-content: center;
  width: 100%;
  height: 200px;
  background: orange;
}

.row-3-left {
  width: 1400px;
  height: 200px;
  background: red;
}

.row-3-right {
  justify-content: center;
  width: 100%;
  height: 200px;
  background: blue;
}

.row-4-left {
  width: 300px;
  height: 50px;
  background: blue;
}

.row-4-center {
  width: 100%;
  height: 50px;
  background: green;
  justify-content: center;
}

.row-4-right {
  width: 300px;
  height: 50px;
  background: yellow;
}
<div class="container-fluid homepage-text-plugin">
  <div class="row-example">
    <div class="row-1-left"></div>

    <div class="row-1-center">
      <p>Header container</p>
    </div>

    <div class="row-1-right"></div>
  </div>

  <div class="row-example">
    <div class="row-2-left"></div>

    <div class="row-2-right"></div>
  </div>

  <div class="row-example">
    <div class="row-3-left"></div>

    <div class="row-3-right"></div>
  </div>

  <div class="row-example">
    <div class="row-4-left"></div>

    <div class="row-4-center"></div>

    <div class="row-4-right"></div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to dynamically change the color of my component depending on the prop passed to it?

I am facing an issue with the color of my component changing based on the value of the prop 'level'. Despite using states to set the backgroundColor, all components end up having the same color due to the state being altered for every comment. I ...

javascriptcssreactjsreact-nativestyles

The functionality of an Ajax call is limited to a single use, regardless of using

For the past couple of weeks, I've been struggling to get my Ajax call to function more than once. As a self-taught individual, I've been trying my best to troubleshoot this issue on my own, but it's really getting to me. Some others facing ...

javascriptjqueryhtmlajax

What steps can be taken to design a form containing only a field for selecting the YEAR?

Can anyone help me create a filter form that only displays the year option? I'm looking to have either a dropdown list or datepicker that exclusively shows the years. I'm new to this so any assistance would be greatly appreciated. I've been ...

htmlformsbootstrap-4

Form tags are closing automatically on their own

Currently experiencing an issue where a form tag is mysteriously closing on its own. In the process of troubleshooting and pinpointing the root cause of this unexpected behavior. Inside the table structure due to Netsuite usage, which complicates the debu ...

jqueryhtmlcssnetsuite

Styling a webpage with a two-row layout using just CSS

I am looking to design a 2-row layout for a webpage where one row will contain filters and the other row will display results. The layout should meet the following criteria: The page height should not exceed 100% The first row's height will vary bas ...

htmlcss

What is the best way to align my header buttons in the center and move items to the far right of my toolbar?

My header currently displays as follows: https://i.sstatic.net/h8zDQ.png I am aiming to center the [LEARN MORE, ABOUT, RESOURCES, CONTACT] buttons in the middle of the navbar and align the profile icon and switch button to the far right of the page! I en ...

javascriptcssreactjsmaterial-ui

Is there a way to prevent HTML code from being executed when sharing it as text? I want to be able to share code without it being activated as HTML on the page

Seems like I have a straightforward issue related to HTML tags. I am looking to post some code snippets on my blog, specifically the <h1> heading</h1>. I want visitors to view and not just the bolded text of heading. Do I need to incorporate J ...

html

Tips for converting a styled MS-Access report to HTML with a template document

I am having trouble formatting my MS Access report using an HTML template. After doing some research, I discovered the following tags and tokens for MS Access HTML templates: <!--AccessTemplate_Body--> <!--AccessTemplate_FirstPage--> ...

htmlms-accessbootstrap-4

Enhancing JQuery UI Accordion with simple ICONS

Is it necessary to use the Jquery CSS file for adding icons, or is there an alternative method? I'm hoping I can avoid using it as I am working within Wordpress and enqueuing the Jquery CSS seems like a complex task for me. Apologies for the basic q ...

jquerycssuser-interfacejquery-uiaccordion

Strange and unexpected dots appearing in my dynamic timeline

After finding a responsive timeline on codepen, I decided to use it for my website because creating one from scratch seemed like too much effort. I made some modifications to fit my needs, but there's one irritating issue that I can't seem to get ...

htmlcssresponsive-design

Retrieve data quickly and navigate directly to specified div element on page

I am facing an issue with scrolling on my website. While it currently works fine, I would like to make the scrolling instant without any animation. I want the page to refresh and remain in the same position as before, without automatically scrolling to a s ...

javascripthtmljquery

Trouble with CSS loading in Node.js with express.static

Currently, I am working on a web project using Node.js and Express. However, I am encountering an issue with my CSS not loading correctly when serving the static files. Despite trying to use express.static, it doesn't seem to be functioning as expecte ...

javascripthtmlcssnode.jsexpress

The XPath function $x() will always return an array, regardless of whether or not an index is specified

How can I target the div elements that have the class "month-table_col" (selecting by month). ... <div class="month-table"> <div class="month-table_row"> <div class="month-table_col">Jan ...

htmlcssxmlxpathweb-scraping

I'm struggling to figure out how to incorporate CSS into my Drupal module

I'm facing a challenge in my project: I have developed a Drupal module that outputs long HTML code. (I am relatively new to working with Drupal modules). However, I am struggling to include CSS styling on this page. Here is the code snippet from my m ...

phphtmlcssdrupaldrupal-7

Optimizing Jquery for dynamically generating large tables

Looking to create a massive table using a Java servlet and sending it to the client as an AJAX response. The table cells have specific styles: <td style="background-color:blue;border-color:yellow;" onClick=tableClick(this)>value1</td> <td s ...

javascriptjqueryhtmlperformancehtml-table

Using CSS to style GLTF objects in THREE.js

Can CSS be applied to a GLTF model in THREE.js, such as setting transparency? Is it possible to achieve this with CSS styling rather than using JavaScript? For instance: <style> .transparency { opacity: 0.5; } </style> and then <a-asset- ...

cssthree.jsaframe

What causes the disparity in functionality between simple html and css in an Angular 2 project compared to a vanilla html website?

When incorporating the following html/css into a new Angular project created with Angular CLI using 'ng new ProjectName', I encountered issues. Despite adding the CSS to app.component.css or styles.css and the HTML to app.component.html, the Angu ...

javascripthtmlcssangulartypescript

Optimizing Dropdown Menus with the <a> or <button> Tag in Bootstrap

For our project, we have incorporated Bootstrap, which requires us to change our menu items from <a href="#" .. to <button> when using dropdowns. This is despite the fact that Bootstrap's documentation still references the use of &l ...

htmlbootstrap-4

an li element is accompanied by a visible box

In my possession is a container: #box1 { height:100px; width:208px; } along with a series <li id="first"><strong>FIRST</strong> </li> <li id="second"><strong>SECOND</strong&g ...

jquerycss

Creating a mobile-responsive Ignite gallery experience

I'm currently working on optimizing a website for mobile devices, but I'm having trouble getting an Ignite Image gallery to shrink properly. I've attempted adjusting the widths of all the container tags and the image itself to use max-width ...

htmlcssmobilejoomlaresponsive-design