I'm using Bootstrap to make a blog theme in WordPress and I'm encountering an issue with following the structure/classes.
My current markup goes:
<div class="container blog-post">
<div class="row">
<section>
<div class="col-lg-8 col-xs-12">
<article>
[Blog post content]
</article>
</div>
</section>
<div class="col-lg-4 col-xs-12">
<aside>
[Sidebar content]
</aside>
</div>
</div>
</div>
</div>
As illustrated, the <section> height is only affected by the margin and padding, not the content.
Since Bootstrap's col-xx-xx classes are floated left, my section is only accumulating height based on its margin and padding, not the child elements. If I clear the float after the section, then the sidebar doesn't display on the right, like I want it to.
I tried setting the section overflow to hidden and other values, but then the sidebar either cleared to the row below, or the section height didn't change.
Any advice would be appreciated!
you have your layout wrong.
you are seeing what you are seeing because you are not applying a clearfix to that section. and if you do (as you noticed already) the sidebar stacks down the post because <section> is a block element and takes 100% of width space, therefore pushing the sidebar down the dom.
you should either include the sidebar in the section (and apply a clearfix), or float that section as well like so:
section {
overflow:auto;
float:left;
}
i suggest including the sidebar in the section, or removing that section tag all togheter
You should refactor your layout a bit. Bootstrap works fine with row and cols, you just have to make it look something like this
<div class="row">
<div class="main col-lg-8">
/* your content */
</div>
<div class="sidebar col-lg-4">
/* your sidebar */
</div>
</div>
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
I have a page where container-fluid is the main div and then nav comes. After nav I have section where views loading in with row wrapping up content which is divided in columns or offsetted. But When I use a row class either on section or the div after , it is creating a gap between nav and page. Mainly adding it to container. But that is why we should be using container. And row is for columns so why still the gap?
<div class="container-fluid ng-scope" id="page-wrapper" ng-controller="homeCtrl as ctrl">
<nav><div class="container"></div></nav>
<section>
<div ng-controller="assumeIdCtrl as ctrl" class="row ng-scope">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
</div>
</div>
</section>
Use default bootstrap's nav, you can copy the code from W3C.
Then make your structure correctly like, for example:
<nav> </nav>
<section class="container-fluid">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</section>
Check that there are different container types. div, nav, aside, section, footer, etc are containers by default. It's ok and awesome to use bootstrap, but we have to remember the default atributes of HTML tags before aply bootstrap.
Try with the default bootstrap's fixed nav.
I made an example of portfolio using it, you can check and inspect here:
portfolio example
it's very clean concerning js (only one jQ function if i dont remember wrong) and there's only a bit of handmaded css.
I'm trying to position sidebar on the right side in a site based on Bootstrap grid.
Well, this is very simplified layout that I've made - jsFiddle
I admit it's not the good use of bootstrap classes (rows etc.) but it works.
The problem is: the sidebar html code must be under the text and content (because of SEO), so it must be somehow positioned next to content (class .content).
I tried positioned it as an relative element but didn't have any luck.
The text in .text div does not have static height, it will change
The .content will have same height every time
Is this more what you were after?
<div class="container">
<div class="row">
<div class="col-xs-9 pull-right">
<div class="col-xs-12 content">Main</div>
<div class="col-xs-12 text">Lorem</div>
</div>
<div class="col-xs-3 sidebar pull-left">
<p>sidebar</p>
</div>
</div>
</div>
jsFiddle
Basically I've split your entire container 3 to 9, and then made your 'content' and 'text' blocks children of the '9' column. I then applied both the pull-left and pull-right class to the relevant containers.
I also fixed up your HTML a bit as it was missing a div tag. I also got rid of some of the text to make the code more readable to me!
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>