CSS: Breaking free from the constraints of a Bootstrap-inspired grid layout

Looking to create a template with a background on the left side that extends to the edge of the page within an 8 of 12 bootstrap columns setup. The remaining 4 columns on the right will not have a background. This layout should be responsive, stacking on top of each other on mobile screens. I need to avoid using a fluid container for 100% width and instead keep the content within the 12 columns with padding on the left.

Has anyone come across good examples of this design?

I'd prefer not to use the ::before pseudo-element, but I'm open to it if necessary.

Refer to the screenshot for a visual representation: the purple represents the expanding left background, white is the page background, and yellow indicates the 12-column grid.

https://i.sstatic.net/MoE25.png

cssbootstrap-4

Answer №2

To achieve an appealing look, consider utilizing the CSS Gradient property.

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

Is it possible to hide a div using Media Queries until the screen size becomes small enough?

Whenever the screen size shrinks, my navbar sections start getting closer together until they eventually disappear. I've implemented a button for a dropdown menu to replace the navbar links, but I can't seem to make it visible only on screens wit ...

javascriptjqueryhtmlcssmedia-queries

My code is currently experiencing an issue - I'm trying to figure out how to center a

Can anyone help me troubleshoot the code in my attempt to make an image responsive and center it? I've been struggling with this issue and can't figure out what I'm doing wrong. Here's an example of how it currently looks on my screen: ...

csstwitter-bootstraptwitter-bootstrap-3

"Maximizing the potential of Bootstrap and Ionic within Angular: A step-by

I have an Angular project created using the Ionic framework, but I also want to incorporate Bootstrap. How can I achieve this? I have installed Bootstrap and made changes to the angular.json file as shown below: "styles": [ { ...

angularionic-frameworkbootstrap-4

Customize CSS styles based on Angular material stepper orientation

Is it possible to change the CSS style of an angular material stepper based on its orientation? For instance, can we set a red background when the stepper is displayed vertically and a blue background when horizontal? ...

cssangularangular-material

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

I recently began teaching myself PHP and Dreamweaver with the help of a video tutorial on building data-driven websites using Dreamweaver. My goal is to create a dynamic table with 6 columns and 20 rows. column1 | column2 | column3 | colu ...

phphtmlcssjavascriptmysql

Click on the entire table to be redirected to the specified link

Currently, I am facing an issue with styling my tables as links. I have 3 tables and I want each table to be a clickable link. However, after implementing the links, I am unable round the corners of the tables. I envision the final look to be similar to t ...

htmlcss

Attempting to implement a button element in a reactstrap card to toggle the visibility of the card's text

Is there a way to implement a toggle feature for the card text ({card.description}) by clicking on the detail button? Do I need to use a state function or is there a simpler method using collapse? I would like the card image and title to always be displaye ...

reactjsbootstrap-4reactstrap

What is the best way to ensure a DIV fills the entire page without using "position: absolute;"?

I am currently working on designing a webpage layout with multiple headers, main content, and a footer. My goal is to use the jQuery UI tabs widget in the main content area with a border around it. The div should span the entire space between the headers ...

csslayouthtml

An error occurred when attempting to run the command npm run compile:sass, displaying the message: npm ERR! missing script:

Everything seems to be in place with the sass folders and files, so what could be the issue? I have my package.json file set up correctly with the following code: { "name": "starter", "version": "1.0.0", " ...

javascriptcssnode.jsnpmsass

Utilizing CSS to apply unique styles to individual radio buttons

I have 4 radio buttons in my quiz application. I need to style only one of them, which is the correct answer option. Here's the HTML snippet that was generated: <p> <input id="SelectedAnswer" type="radio" value="5" name="SelectedAnswer"> ...

htmlcss

Exploring the Interactive Possibilities of CSS3 with Background Tiles

I'm struggling to implement a flip effect where the content of a div changes, but I can't seem to prevent the text from disappearing after a few seconds. I've tried using backface-visibility:hidden with no luck! HTML <div class="cards" ...

htmlcsscss-transitions

What is the best way to format MarkDown content within a nextJs environment?

Markdown-it is successfully converting markdown to html in my Nextjs project. However, I am facing a styling issue with specific elements such as h2, h3, ul, and li. Here's the code snippet: <h1 className="text-3xl mb-3 leading-snug d ...

cssnext.jsmarkdown

Can Masonry.js content be perfectly centered?

I am currently experimenting with creating a layout consisting of one to four variable columns per page using the Masonry plugin. I have been impressed with how it functions so far. However, there is an aggravating gap that persists despite my best effort ...

javascriptcssmasonry

JavaScript combined with a dynamic menu, a customized current link style using CSS, and a site built on PHP

Here's my current website setup: My website is modular and uses dynamic inclusion. The header is a crucial part of the main page, which is responsible for displaying content from specific links on the site. External links to CSS and js files are incl ...

phpjavascripthtmlcssdynamic

CSS Styling for Adjusting Table Cell Widths

In my HTML table, I am trying to set the overall width while ensuring that the label column does not become too wide. Although it functions correctly in Firefox 4, IE 9 seems to be completely ignoring the width property. <html> <head> <sty ...

htmlcssinternet-explorerfirefoxcross-browser

Unable to click on element in Firefox browser

Encountering an issue with the following error message: Element is not clickable at point (791, 394). Other element would receive the click: Command duration or timeout: 66 milliseconds Any ideas on what's causing this? Using selenium web driver ve ...

htmlcssseleniumselenium-webdriverselenium-firefoxdriver

Ways to include text underneath icons using HTML and CSS

Seeking guidance on how to display text below icons on my website. Can someone please provide instructions? <div class="bottom-bar div-only-mobile" style="position: fixed; bottom: 0; width:100%"> <a href="Dashboard"> <ion-icon name= ...

htmlcssresponsive

Various placements in Internet Explorer, Chrome, and Mozilla Firefox

Currently, I am working on a website project The layout appears to be fine in Internet Explorer and Firefox, but there seems to be an issue in Chrome. Due to the length of the code, it cannot be posted here, so I have included links to the files: HTML: ...

htmlcsscross-browser

The E.js Template encountered an error with an unexpected token "else"

I am in the process of creating a website quickly using e.js & Express. However, I am encountering some problems when trying to use an if-else statement within e.js tags. The if statement works fine, but as soon as I add an else statement, things start t ...

javascripthtmlcssexpressejs

What is the best way to divide the height of one div evenly among three other divs?

I have three child divs inside a parent div and I'm looking to distribute the height of the parent div evenly among the three children. Here is the HTML code: <div class="frameright"> <div class="divright"> <t ...

htmlcss