Adding a background with padding to a bootstrap grid row - here's how!

Bootstrap is a new concept to me, but I am starting to appreciate the grid system it offers.

I have successfully created a test layout using Bootstrap, however, the one thing I am struggling with is adding a background around certain rows.

Can anyone guide me on how to add padding on the left and right sides of my layout?

Below is an example of what I have done so far:

<!DOCTYPE HTML>
<html>
    <head>
        <meta content="text/html; charset=UTF-8">
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <div class="container" id="container">
            <div id="header" class="row">
                <div class="span12">Hallo123</div>
            </div>
            <div id="main" class="row">
                <div class="span10" id="one">
                    <div class="row">
                        <div class="span2">Hallo1</div>
                        <div class="span2">Hallo2</div>
                        <div class="span2">Hallo3</div>
                        <div class="span2">Hallo4</div>
                        <div class="span2">Hallo5</div>
                    </div>
                </div>
                <div class="span2" id="two">Hallo2</div>
            </div>
        </div>
    </body>
</html>

CSS:

#main {
    background-color: white;
    box-shadow: 0px 0px 6px #888;
}

#header .span12 {
    background-color: #DD1144;
}

#container {
    background-color: #DF8505;
}

#one, #two, #three, #four {
    background-color: #0088CC;
}

Answer №1

Would this be of assistance?
http://jsfiddle.net/panchroma/JAFPq/

In instances where you wish to extend the background beyond the width of the bootstrap grid, one approach is to utilize negative margins. However, this method may not be ideal if you require the background to span the entire width of the screen, especially when dealing with collapsing grids on narrower screens.

A more comprehensive solution involves closing the bootstrap container div just before the desired background area. Then, initiate a new bootstrap container for that specific background area, enclosing it within its own div for customizable manipulation.

<div class="container" id="container">
        <div id="header" class="row">
            <div class="span12">Hello123</div>
        </div><!-- end header -->
</div><!-- end container -->

<div class="backgroundHere"><!-- start of div where the background is needed -->
<div class="container">     
        <div id="main" class="row">
            <div class="span10" id="one">
                <div class="row">
                    <div class="span2">Hello1</div>
                    <div class="span2">Hello2</div>
                    <div class="span2">Hello3</div>
                    <div class="span2">Hello4</div>
                    <div class="span2">Hello5</div>
                </div><!-- end nested row -->
            </div><!-- end span 10 -->

            <div class="span2" id="two">Hello2</div>

        </div><!-- end row -->
 </div><!-- end container -->
 </div><!-- end backgroundHere -->

<!-- Another bootstrap container can be opened here if additional content is present without the background-->  

Depending on your background's specifics, @media requests might be necessary to define behaviors for wide and narrow screens, such as box-shadow padding in your scenario.

Best of luck!

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

Google Extension PHP Plugin

Is it feasible to integrate a PHP file into a Google Extension for Chrome? I've been exploring the idea of creating an extension and most resources only mention HTML, CSS, and JavaScript. Any guidance on using PHP in the extension would be highly valu ...

What is the best way to incorporate an external .css file into my Angular project by referencing its URL?

I'm managing a collection of CSS files online and I need to incorporate each one into my project based on its specific requirements. One component in particular is connected to different numerical IDs in the router. I am looking for a way to dynamica ...

When trying to show a Vue view, there was an issue with reading properties of null, specifically the 'style' property

I am experiencing an issue with a header that has an @click event in the body. Instead of displaying a Vue view upon clicking, I am encountering the following error: Cannot read properties of null (reading 'style') Upon researching on Stack Ove ...

Tips for avoiding flickering in safari during @-webkit-keyframe animations

At times, Safari may experience flickering during the execution of a CSS animation. Despite extensive research and attempts to find a solution, the issue persists. The HTML code snippet is as follows (refer to jsfiddle for more details) <div class="do ...

Viewing the details of a checkbox option

I have encountered a situation where I need to handle detail rows within a table that contain checkboxes for selection. The desired behavior is: 1) When clicking on the detail row image, it should expand to show the details of its parent row without sele ...

When the user clicks, position a div directly below another div

Can anyone help me figure out how to center a div underneath another one when a specific div is clicked using programming? I've tried multiple solutions but nothing seems to work. Below is the code snippet that I have written. You can also check out t ...

Guide on making an SVG tooltip using the Menucool JS extension

I am trying to add a simple tooltip to an SVG "map" when the mouse hovers over a rectangle. To create the tooltip, I would like to utilize this specific plugin. Here is how I have connected the SVG to HTML: <object data="map.svg" type="image/svg+xml" ...

Troubleshoot: CSS class H2 style is not displaying correctly

I have the following code in my .css file: h2.spielbox { margin-bottom:80px; color:#f00; } a.spielbox { text-decoration:none; background-color:#aff; } However, in my html file, the h2 style is not ...

What is the process for capturing a screenshot of a specific DOM element using Intern JS?

I'm currently utilizing intern.js for testing a web application. It allows me to run tests and generate screenshots in case of failures. My goal is to capture a screenshot of a specific element for conducting CSS regression testing with tools like res ...

Could Safari 7.1 be causing issues with outline-color and overflow?

After upgrading to Safari 7.1, I noticed that a couple of my css lines have stopped working. These lines were functioning fine with Safari 7.0.x and are still working in browsers like Chrome. overflow: hidden; and outline-color: [color]; Specifically, ...

Locate the final flexbox in the initial row and the initial flexbox in the concluding row

How can I identify the last element of the first row and the first element of the last row in the given code to make it round from all corners? It should be noted that the column number will vary as well as the last element of the first row and first eleme ...

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

Enhancing readability in a vertical CSS menu with proper spacing

I'm looking to increase the spacing between each menu item as they appear too close together. Can someone help me with managing this? The menu names are currently right under one another, almost touching. What is the best way to create more space betw ...

What's the best way to create an onclick event for a li element that includes a pseudo-element ::before

I have successfully created a Timeline using HTML and CSS elements. The visual result is as follows: My goal is to enable users to click on the second circle, triggering a color change in the line that connects the first and second circles. This color tra ...

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

Ways to center vertically aligned buttons within cards in a React application with Material-UI

I've encountered an issue with my ReactJS project using material-ui. I created 3 cards, each with a paragraph of varying lengths. This caused the buttons to be misaligned vertically in each card, as the position differs due to paragraph size differenc ...

How to set up a Carousel as the background within a div using Bootstrap 5

I'm attempting to create a visually appealing layout by showcasing a Carousel component behind some text. The idea is to have scrolling and fading images with a prominent header overlaid on top of them. I want the carousel images to be contained withi ...

The presentation of the Google graph with dynamically changing data appears to be displaying inaccurately

I am looking to incorporate a graph displaying sales and purchase data on my webpage. Users should be able to select from categories like Purchase, Sales, or Production. I have separate tables for Purchase (AccPurchase) and Sales (AccSales), with productio ...

Center Text Field to Linear Progress in React

I'm struggling to position a TextField/Autocomplete with a loader/linear progress at the bottom without it pushing the TextField/Autocomplete upwards. Can anyone suggest a proper solution for this issue? For reference, you can check out the Codesandb ...

My div won't stay fixed in the layout no matter what I try

Being fairly new to css, divs, and everything in between, I decided to create a simple layout for my band without unnecessary links like bio or merch store. Instead, I wanted separate spaces for our video, music player, and a Facebook window. I successful ...