Why is the fluid-container overlapping like that, but others don't?
Is that correct, or am I missing something? Looks wrong to me.
<nav class="nav flex-column float-left">
{links}
</nav>
<div class="container-fluid"><!-- overlapping -->
<div class="row"><!-- fine -->
<div class="col"><!-- fine -->
<main role="main"><!-- fine -->
{content}
</main>
</div>
</div>
</div>
https://jsfiddle.net/w3LwwxL7/
Edit: Just for you to know: I want to achieve a static left sidebar/nav with a fixed width (see image). Everything on the right is main content. That's why I didn't used col-1 (nav) and col-11 (main). Hope this helps :-)
Give your sidenav a fixed width and set a padding-left (same amount of sidebar width)
Here is an example:
https://jsfiddle.net/w3LwwxL7/3/
Related
I have the following layout:
<body>
<nav class="navbar navbar-inverse">
...
</nav>
<div class="jumbotron">
...
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">...</div>
</div>
<div class="row">
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
</div>
</div>
</body>
Navbar and header take up 100% of the screen width. However, the columns don't - huge empty margins remain near the left and right edges of the screen.
If I remove the container div everything takes up 100% of the space and it works fine by me, but I'm not sure if it's a good practice since in alll examples container is used. Also, I want to make the columns take up all the space to the end of the page and not sure if container is necessary to accomplish it.
Per the Bootstrap documentation, a container is required. You can use container-fluid instead of container if you want full-width containers. You can find this in the Bootstrap 3 documentation here:
http://getbootstrap.com/docs/3.3/css/#grid
You can find info about this in the Bootstrap 4 documentation here:
https://getbootstrap.com/docs/4.0/layout/overview/
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>
I currently have my layout page divided into two columns using bootstrap 3 with something similar to this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
I want the div with class "info" to stay fixed on the top left side when scrolling the page. When I try the bootstrap "affix" class the content in "info" effectively gets fixed but the "tasks-column" suddenly moves all the way to the left completely covering it.
I have also tried the plain css position:fixed; on "info" but it does not do anything.
The content in info is NOT a navigation panel.
Thank you guys.
Edit: the content in info is dynamic (it varies depending on the user input).
You need to offset the tasks-column. Try this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 col-md-offset-4 tasks-column">
<!--some Markup -->
</div>
This is because you are fixing the content that pushes "tasks-column" to the right.
The simple way to do what you want is just to move "info" inside col-md-4, like this:
<div class="row">
<div class="col-md-4">
<div class="info">
<!--some fixed Markup -->
</div>
</div>
<div class="col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
Hope this helps!
I'm trying to set up a two-column layout - The left column is a list of items and the 2nd column is the details about an item in the first column (click on the item and the data renders, but that's not important right now).
I'm getting stuck setting up the layout - I can get the columns going, but when I add the list into the first column, it's rendering below it. And I'm not sure why.
Can someone point me in the right direction?
<body>
<div id="content">
<div class="row">
<div id="sidebar" class="col-md-4">
<div class="list-group">
<a class="list-group-item">Item Here</a>
<a class="list-group-item">Item Here</a>
</div>
</div>
<div id="main" class="col-md-8">
Other Stuff Here
</div>
</div>
</div>
</body>
I've tried removing the parent div (id="sidebar") and making that ID/width part of the list-group div, but then id="main" renders above the list.
So, I'm confused. What am I missing?
if you use col-md, your div have 100% width when your browser width is below < 768px, it's a behavior on mobile first css grid, so change col-md by col-xs for have your result for any device size
Evening all,
I'm having a little trouble with the grid system and am looking fir a bit of guidance here.
Take the following code for example:
<div class="container">
<div class="row"> <!-- PROBLEM -->
<div class="col-md-12">
<div class="problemclass">
</div>
</div>
</div> <!-- /PROBLEM -->
</div> <!-- /container -->
</header>
<main>
<div class="container">
<!-- WORKS -->
<div class="row">
<div class="col-md-4">
<div class="notproblem">
{CONTENT}
</div>
etc...
As you can see, I've marked a row as PROBLEM in the header and it contains a 12 column span. The CSS for problem class is set at about 300px height and a background image (It is set at 300px because the background image is 300 px in height). the code looks like this:
.problemclass{
height: 300px;
background: url('background.png');
}
Everything stacks and lays out perfectly... until I size the browser down to test the stacking. At this point, the row marked PROBLEM will begin to completely overlap the row marked WORKS; the content will overlap the background image, and the actual div goes under the background image! I have no freaking clue why LOL! My guess is that maybe I cannot have just a background with a set height and expect it to work?
Any advice would be appreciated, and I hope I was clear enough.
Also note that there are 2, 6 column grids above the 12 column grid in the same row that I did not include in attempt to keep the code a little more clean and clear.