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
Related
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.
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
I have a two column bootstrap page as shown below. The left contains two rows (an image and a bordered bit of text below the image that fills the whole column width), the right is login details.
The image is 700px wide, and for smaller devices or screen widths I change to a smaller image. This all works fine. However when I resize the browser the right login column overlaps the left column's 700px image by about 40 pixels before it snaps to a single column.
I tried to fix this by putting in a minimum width for the left hand column like this:
<div class="col-md-8" style="min-width: 768px">
Which worked and it snapped correctly, however on doing so the left hand side main bordered text (that is a row below this image) then became fixed width and did not resize.
How can I get it so the two columns do not overlap and the text still flows in my bordered text.
thanks.
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<DIV class="row">
<div class="col-md-12">
<img class="loginPic hidden-xs" src="images/pic.png" >
<img class="loginPic visible-xs" src="images/pic-small.png" >
</DIV>
</div>
<br />
<DIV class="row">
<div class="col-md-12">
<div style="border: 1px solid #00549d; border-radius:10px;">
<div style="padding:20px;font-size: 13px;">
<p>Lots of text.</p>
</div>
</div>
</div>
</DIV>
</div>
<div class="col-md-4 pull-left" >login stuff here</div>
</div>
</div>
I'm using semantic-ui as my site ui framework, alongside angular 1.5.8.
What happens when the sidebar is visible is that the browser must hide nearly 50% of the card, within a ui cards dive, before the card responsively moves to a new row.
<body ng-controller="MainCtrl">
<div class="pushable">
<div class="ui left vertical inverted visible thin sidebar menu">
<a class="item">
Overview
</a>
<a class="item">
Upcoming
</a>
</div>
<div class="pusher">
<div style="margin: 20px;" class="ui cards">
<div class="card" ng-repeat="bill in bills">
<div class="content">
<div class="header">
{{bill.name}}
</div>
<div class="meta">
{{bill.biller}}
</div>
</div>
<div class="extra content">
<div class="ui two buttons">
<div class="ui basic green button">Edit</div>
<div class="ui basic red button">Delete</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If I remove the visible class from the sidebar div, then it works as expected. As soon as the browser window chrome gets close to the border of the card, the card wraps to a new row. What am I doing wrong? Do I have to manually account for the size of the sidebar myself? It doesn't seem like I would have to, considering the cards and sidebar are both semantic-ui components.
I've got a working plunker demonstrating this issue as well.
From http://semantic-ui.com/collections/menu.html
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
Add the container class to your to your cards div to make it responsive.
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/