I am in need of colorful full-width blocks to differentiate the sections on my website.
Currently, I am constructing my website with Bootstrap 3 within a standard container. However, I would like certain sections to be vibrant blocks that span across the entire browser window.
If anyone is familiar with how this can be achieved and could provide an example, I would greatly appreciate it!
To create full-width colored blocks, you need to nest the container within another tag that spans the entire width of the page using a CSS background attribute. In this example, I have used the HTML5 "section" tag. Below is a sample code snippet. You can check out the jsfiddle for reference.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 - Full width coloured blocks</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type='text/css'>
.colored-block {
width: 100%;
padding: 30px 0px;
color: #fff;
}
.purple { background: purple; }
.green { background: green; }
.blue { background: blue; }
</style>
</head>
<body>
<section class="colored-block purple">
<div class="container">
<h1>Header 1</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block green">
<div class="container">
<h1>Header 2</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block blue">
<div class="container">
<h1>Header 3</h1>
<p>Paragraph content goes here</p>
</div>
</section>
</body>
</html>
Check out the jsfiddle for a live example.
Here is a simple way to illustrate your issue using three different colors: red, green, and blue.
<div class="row">
<div class="col-md-4 ">
<p class=text-danger> red color</p>
</div>
<div class="col-md-4 ">
<p class=text-success> green color</p>
</div>
<div class="col-md-4 ">
<p class=text-primary> blue color</p>
</div>
</div>
Check out this jsfiddle featuring a layout with 3 columns and full height background colors.
CSS:
html,body,.container-fluid
{
height:100%;
}
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-4, .col-xs-4
{
display: table-cell;
float: none;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML
<div class="container">
<div class="row">
<div class="red col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="blue col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="green col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
</div>
</div>
To create colorful full-width sections in Bootstrap, simply replace 'container' with 'container-fluid'.
Example:
CSS:
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML:
<div class="container-fluid">
<div class="row">
<div class="red col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="blue col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="green col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
I am attempting to modify the following html code: <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 256 256"> to this updated version: <svg xmlns="http://www.w3.org/2000/svg" width="30&q ...
Utilizing the jQuery DataTables plugin with a JSF <h:dataTable>. The page contains 86 records. +++++++++++++++++++++++++++++++++++++ + SN. + Name + Email + +++++++++++++++++++++++++++++++++++++ + 1 + Name 1 + Email 1 + + ...
I only have one base tag in the head section of my HTML document, and there are two anchor tags with different URLs as shown below: <!DOCTYPE html> <html lang="en"> <head> <base href="https://www.youtube.com"/> </head> &l ...
I'm having trouble making an image of an X rotate 180 degrees when it's hovered over. Instead of rotating, the image just moves up and to the right. What am I missing that's preventing this from looking like a smooth 180-degree spin? .bl ...
On my form, I have a few text fields and I am looking to automatically set the cursor (auto focus) on the first text field when the page loads. I aim to accomplish this without relying on javascript. ...
On my website, I have 6 CSS files linked, but on a specific page, I only need to use 3 of them. Our developers are using a master page in .NET and are hesitant to make changes to it. Therefore, I am wondering if there is a way to exclude certain linked C ...
I have encountered a similar issue, but with a twist from Can't override root styles of Typography from Materil-UI Back in v4, I had a theme set up like this: import { createTheme } from '@material-ui/core/styles'; export const theme = cre ...
My template is not showing the default select option that I have set for one select element. I attempted to achieve this with the following code: <div class="select"> <select (change)="calculaMes(mesEscolhido)" [(ngModel)]="mesEscolhido" na ...
Currently utilizing create-react-app v2. I've encountered an issue with a component that has multiple classnames: "x15 x14 login-form__field". Strangely, in the production build, the order of '.x14' and 'login-form__field' seems t ...
I need assistance with my HTML code. Here is what I have: <div id="cover" on-tap="_overlayTapped" class$="{{status}}"> <form method="POST" action="/some/action"> <input required id="name" name="name" label="Your name"></input> ...
I'm using a Next.js framework to connect to the OpenAI API, and I've integrated it seamlessly with an AI npm package. The functionality is incredible, but I've encountered an issue regarding line breaks in the responses. You can find the AI ...
I'm encountering some difficulties with the tabbed navigation I created using CSS. Essentially, when a button is clicked, it should remove the hidden class from one div and add it to the other. However, what actually happens is that the div which sho ...
Upon executing the following script in Firefox... var d = $("<div class='test'></div>"); d.hide(); $("body").prepend(d); d.show(); ...and examining the HTML, the inserted element will have the style attribute: style="display: blo ...
Having trouble updating the innerHTML attribute for both elements with ids containDiv and status. For some reason, it only changes containDiv but not status. The console shows an error "Cannot set property innerHTML of undefined", indicating that the eleme ...
My text fields have server-side validation messages. The field 'title' is a required field on the server side with a '[Required]' data attribute in the class, but it only seems to be checked on a postback or form submit. I am saving the ...
There seems to be an issue with the HTML code in this program. When attempting to use x or any other HTML code, it does not format correctly. This is unusual as HTML has worked in the past. The problem occurs with the first string array and not with the ...
I am currently working on developing a shipment tracker using Angular, HTML5, and CSS3. Does anyone have any suggestions on how to dynamically create the shipment tracker using AngularJS? My initial plan is to incorporate ng-animate for the tracker. Than ...
Here is some HTML code that I am working with: <img src="" data-src="https://example.com/image1.jpg" class="img"> <img src="" data-src="https://example.com/image2.jpg" class="img"> <img src="" data-src="https://example.com/image3.jpg" class ...
Currently working on the design of the Search page for an online store. I aim to adjust the number of items displayed on the screen gradually as the screen size changes, similar to Amazon's layout. Additionally, I'm looking to rectify the excess ...
I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...