I have a complex Bootstrap-4 grid-layout. Now, suddenly inside a column, I need to make the background (not the content!) reach from left of the browser-window to the right of the browser-window, the whole width. Is there any way this can be done?
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>
This background should stay white.
</p>
</div>
</div>
<div class="row mybackground">
<div class="col">
The red background should fill ALL of the browser-width from left to right, but keep the area above and below with white background.
</div>
</div>
</div>
https://jsfiddle.net/enu2vxdw/
If you look at the fiddle, the background of < div class="mybackground" > should reach from left to right (no white paddings left and right), but the content of it should stay as it is.
Any idea how to do this with the least amount of changes (because unfortunately there are a lot places in the code where this needs to be done, so a simple css-class would be awesome).
Instead of adding rows inside a container, you should now have sections with containers.
An example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section>
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>This background should stay white.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>This background should stay white.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row bg-danger text-white">
<!--div class="col"-->
<div class="container">
<div class="row">
<div class="col">
<p class="mt-3">The red background should fill ALL of the browser-width from left to right, but keep the area above and below with white background.</p>
</div>
</div>
</div>
<!--/div-->
</div>
</div>
</section>
The container-fluid can stretch full width. To align the content you'll have to introduce a container again.
You'll end up with quite a lot of nesting which doesn't look too pretty but I don't know another Bootstrap way around this.
This result will be fully responsive regarding the spacing.
Related
I am starting out with bootstrap here and I want my page to limit itself to 1170px which is the container class standard, but I want the color to continue across the full width of the page.
The only idea I can think of is:
<div class="container-fluid BGtoExtendWholePage headerBG">
<div class="container">
<div class="row">
<div class="col-12">
Main Body of Page - Header
</div>
</div>
</div>
</div>
<div class="container-fluid BGtoExtendWholePage ContentBG">
<div class="container">
<div class="row">
<div class="col-12">
Main Body of Page - Main Content
</div>
</div>
</div>
</div>
There's big arguments against nesting containers in Bootstrap (cue the person to post a link to the bit of documentation saying not to) but I found this to work.
You nest a container within a container-fluid - note the use of p-0 to remove the padding from the inner container.
<div class="container-fluid bg-red mb-3">
<div class="row">
<div class="container p-0 mt-6 mb-6">
...
</div>
</div>
</div>
If you want a full-width background color that is the same in your whole project then you could simply add a <body> tag at the beginning and end of your code (if it isn't already there) and add the following to your CSS
body {
background-color: color-choise;
}
Fill in the color-choise with the color you want it to be.
I am using Bootstrap to design a webpage. Since many people uses large screens I prefer webpages where the content is centered with some white space on both sides. An example is this page:
https://www.nhstateparks.org/visit/state-parks/dixville-notch-state-park.aspx
I have tried to make a design like this:
<div class="container-fluid text-center">
<div class="row content">
<!--Uses an offset to get white space on left -->
<div class="col-sm-2 col-md-offset-2">
Sidebar with some links
</div>
<div class="col-sm-6">
Main content
</div>
<div class="col-sm-2">
<!--This is added only to get white space on right -->
</div>
</div>
</div>
But I want the page to behave like this page do. When you shrink the page, it will "use" the blank space on left and right before it start to scale the content. I see stackoverflow.com also do this. It to not start to scale the content before the white space on both side are used.
Replace the container-fluid class with container class.
<div class="container">
<div class="row">
<!--Uses an offset to get white space on left -->
<div class="col-sm-2">
Sidebar with some links
</div>
<div class="col-sm-6">
Main content
</div>
</div>
</div
I am using the grid system (Bootstrap 3.3.4) to try to make about four columns. The only problem is it puts the grid in the background. And the footer just sits on top of everything in the grid. Here is the jsFiddle, notice how the last little bit of text is cut off by the navbar on the bottom. Here is my code:
<div class="jumbotron">
<h1>Example page header</h1>
</div>
<div class="col-md-2">
<div ng-repeat="category in main_business_categories">
{{category}}
</div>
</div>
<div class="col-md-2">
<p>column2</p>
</div>
<div class="col-md-2">
<p>third</p>
</div>
<div class="col-md-6">
<p>fourth</p>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
Made with love by Jeremy Martinez
</div>
</div>
How do I get it to where everything (header, footer, and text in grid) are all on the same depth. Right now, grid is in background and everything else is in foreground.
First you should wrap your columns inside a .container or .container-fluid and .row: https://jsfiddle.net/bhbhv38f/2/
The .navbar-fixed-bottom cause the behaviour you describe. You should remove that class to get the footer at the end of your content, see https://jsfiddle.net/bhbhv38f/3/
I have a screen split in two, using two columns.
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
I need a small (approx 10px) gap between the two columns.
http://www.bootply.com/vaOb1WdR5I
Can this be done?
Both boxes would need to reduce by 5 pix (in the above example), as I need the total width to remain.
Edit: Some ideas nearly work, but I am getting an extra Well that I don't want. With this:
<div class="row">
<div class="col-md-6">
#Html.Action("ShowDuePayments", "Transaction")
</div>
<div class="col-md-6">
#Html.Action("ShowRecentTransactions", "Transaction")
</div>
</div>
I get this:
The 'under' well div shouldn't be visible.
A couple of points:
You shouldn't add extra classes to the Bootstrap columns (that's not a hard and fast rule, but a good recommendation)
You are missing the container wrap.
Make changes using those rules and it looks like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well">Left Top Box</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">Left Bottom Box</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well">Right Box</div>
</div>
</div>
</div>
How about this?
<div class="row">
<div class="col-md-6" style='padding-right:5px'>
<div class='well'>
Left Box
</div>
</div>
<div class="col-md-6" style='padding-left:5px'>
<div class='well'>
Right
</div>
</div>
</div>
http://www.bootply.com/Ogrte6IQzw
If you remove the inline styling, you will have the natural spacing provided by bootstrap, which is 15px padding.
You can change the class of col-md-6 and add width:49%, and to the 2nd div add pull-right class like:
HTML:
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well pull-right">
Right
</div>
</div>
CSS:
.col-md-6{
width:49%;
}
You can also try to add padding to the two div tags ie:
.col-md-6{
padding:5px;
}
This would add a bit of padding to all the sides - unless you use padding-left & padding-right and assign different class names to the divs - depending on how you want your code to be layed out.
You could also use an additional class so you only modify special column-6 elements and not all on your site. This example also uses percentage based widths as Flopet17s. You could tweak the percentage number to better fit your desired gap width.
.withgap {
width: 49%;
margin-right:1%;
}
<div class="row">
<div class="col-md-6 well withgap">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
I'm trying to layout a page element using bootstrap 3 as it's base. I've been ok with most of the layout but I'm having trouble with a particular layout I'm trying to create.
Using the standard container > row > column approach the first row only contains an image, the second row a nav type panel which is meant to sit beneath the image. Instead it's appearing at the top.
Looking at it with chrome the first row appears to have no height, despite the image.
There's something I'm missing or don't understand here.
Update
The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative.
Here's an image of what I'm trying to create (90% there)
I've created a jsfiddle here: http://jsfiddle.net/longestdrive/vt24K/
the html is below:
<div id="hole-stats-modal">
<div class="container" >
<div class="row">
<div class="col-sm-12">
<!-- image -->
<img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
</div>
</div>
<!-- hole stat panel -->
<div id="hole-stats-panel" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- side stats -->
<h3>Hole Detail</h3>
<p>Content for this panel</p>
</div>
</div>
</div>
</div>
<!-- hole text info -->
<div id="course-guide" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-1">
<h3 id="hole-n-2" >3</h3>
</div>
<div id="hole-description" class="col-sm-8 ">
<p>Some text here</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hole-navigation">
<div class="container">
<div class="row">
<ul class="unstyled list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not
Any help appreciated
I think you had way more containers and rows than are needed. I recreated what you are looking for using a lot less elements.
you really only need two rows, one for the image and one for the bottom nav.
jsFiddle Demo
<div id="hole-stats-modal">
<div class="container">
<div class="row">
<div class="col-sm-12"> <!--optional-->
<div class="image"> <!-- Relative Pos with image as background -->
<div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
<div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"><!--optional-->
<div class="hole-navigation">
</ul></ul> <!--Nav-->
</div>
</div>
</div>
</div>
</div>