I am looking into a future project and I want to build it with bootstrap. I want it to be a boxed ( non-fluid ) layout limited to 1170px ... [actually on a side note I'm currently working with bootstrap V2 because I haven't looked properly at V3 yet but eventually I will work out the same or similar thing out in V3].
So what I need is to have full width panels ( these are quite popular lately in "flat design") with constrained content. That is ... all the content would be limited to a max width of 1170px but the backgrounds would be spanning the full width of the browser.
So I know this markup works but a) is it OK to have nested "container" divs like i've done and b) I haven't seen this technique before ... is there any better way (more standard way) that I might be missing ... and I appreciate that it may be better to start with version 3 but I would rather work this out in V2 first for my old projects if for nothing else
<div class="container-fluid" >
<div class="container" >
<div class="row">
<div class="span12"><h2>Boxed" Bar ( limited to 1170px)</h2></div>
</div>
</div>
<div class="row" style="background:#666">
<div class="span12"><h2>Full Width Bar with no limits to content</h2></div>
</div>
<div class="row" style="background:yellow">
<div class="container" >
<div class="row">
<div class="span12"><h2>Full Width Bar with content limited to 1170px</h2></div>
</div>
</div>
</div>
</div>
I found a premium bootstrap marketplace and analyzed some of the themes on there. It looks like something along these lines is a better model.
<div class="my-own-wrapper" > <!-- eg 100% width to wrap entire site -->
<div class="container" >
<div class="row">
<div class="span12"><h2>Boxed" Bar ( limited to 1170px)</h2></div>
</div>
</div>
<div class="whatever" style="background:#666"> <!-- non bootrap div 100% width -->
<div><h2>Full Width Bar with no limits to content</h2></div>
</div>
<div class="whatever" style="background:yellow">
<div class="container" > <!-- wrapping bootstrap scaffolding in display div -->
<div class="row">
<div class="span12"><h2>Full Width Bar with content limited to 1170px</h2></div>
</div>
</div>
</div>
</div>
Obviously it might be better to use some html5 elements too.
Related
I just want to be sure about some basic HTML structuring.
Most HTML page body layouts start with a <div class="container"> which of course contains all the HTML in with boostrap v4 it contains rows and columns.
All nice and easy there.
My question is, am I "correct" or not to place columns and rows within separate containers?
This is what I mean:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
</div><!-- end body -->
I think the answer to my question is that "it is ok" because for example what happens if you want a full-page width div container then you'd use a separate container for those elements.
I just want to be sure, thanks!
As per your example, if the content has to be inside the container, then using multiple containers is redundant. Use a single container and then separate the rows.
This approach also depends heavily on the design.
Full page width div, YES, the separate container is correct.
Note : For full width
Use container-fluid for full width, and remove the padding as well.
container-fluid class has padding-left : 15px and padding-right: 15px.
You can remove it to cover the div end to end. You can use pl-0 and pr-0, classes provided by bootstrap to set padding-left and padding-right to 0, respectively.
So i'm using flexbox grid and have a basic something like this:
<div class="container">
<div class="row">
<div class="sidebar col-xs-3">
<div class="sidebar-top"></div>
<div class="sidebar-space"></div>
<div class="sidebar-bottom"></div>
</div>
<div class="content col-xs-9">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
</div>
</div>
And generally looks something like this:
Now I need the top green bar to follow down when the scroll and the bottom green bar to stick to the bottom of the visible page. The center place that says hey, may or may not ever have content in it.
I have tried quite a few things, mostly taken from the css-tricks site about flex and other various blog posts, but none seems to satisfy what I need. If I add a wrapper around the sidebar-top/space/bottom and set it to a column instead of row it no longer gets the equal height that .sidebar and .content have. Nothing seems to work.
Is this even possible with pure css?
edit: The relevant css classes container row and col-xs-X are all from flexbox grid linked at top of question
So I want the following layout:
Here is an artists mock-up:
But here is what I ended up with after trying for quite a few days:
I need help to make the last elements line up right. If I use the wrong components you are free to change them. The site needs to be mobile friendly. I have made a fiddle here.
.
I also seem to have the issue of being unable to scroll vertically on the page if overflow occurs.
In bootstrap 3 seems a simple layout like this (just a suggestion)
<div class='container-fluid'>
<div class='navbar navbar-default navbar-fixed-top'> .... <(div>
</div> <!-- end container full width -->
<div class='container'><!-- begin container center margin auto -->
<div class=' col-md-12'><img src='yourlink'></div>
<div class=' col-md-12' ><h1>Title</h1></div>
<div class='jumbotron col-md-12' </div>
<div class='row col-md-12>
<div class='col-md-6>
... content for left lower box
</div>
<div class='col-md-6'>
<div> content for r2ght lower 1 box</div>
<div> content for right lower 2 box</div>
</div>
</div>
</div><!-- end of container --!>
with a background image
I am curious to how this is achieve this concept, I was talking to a friend and they stated all I have to do is add two floating divs for the sidebars (3 column layout), change the width of the container and then the columns inside will arrange and resize and needed.
What I currently have is:
<div class="container-fluid">
<div class="row">
<div class="col-md-2"> Side Bar one </div>
<div class="col-md-8"> Content </div>
<div class="col-md-2"> Side Bar Two </div>
</div>
</div>
I assumed that col-md-2, because it has a float on it, is already "fixed width". But apparently not. So how could I implement this "fixed width" concept and still have the responsiveness?
I am designing a website using the responsive Bootstrap framework.
I have 3 content areas next each other (horizontally). If I have a small display, these 2 contents are under each other (typical responsive design).
Now I want to add a <hr/> after each content block that is under each other.
<div class="row-fluid content">
<div class="span4">test1</div>
<div class="span4">test2</div>
<div class="span4">test3</div>
</div>
This is the whole code for a big display.
On some displays there are 2 blocks horizontal and 1 block under the 2 blocks.
Then I want to insert a <hr/> between the 2 lines.
Bootstrap provides classes to manage the visibility of any element by device, based on media queries. You have to place <hr/> elements wich are only visible in specific viewports:
<div class="row-fluid content">
<div class="span4">test1</div>
<hr class="visible-phone"/>
<div class="span4">test2</div>
<hr class="visible-phone"/>
<div class="span4">test3</div>
</div>
Check the documentation for more Responsive utility classes.