I am trying to place Bootstrap breadcrumb navigation in a template.
What I would like is a full-width 100% with a background color, and then within that place a col-lg-12 but I can't figure it out.
This image might help:
<div class="container-fluid darkgrey">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Section</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php the_title();?></li>
</ol>
</nav>
</div>
</div>
</div>
I think I might need to "nest" columns but I can't figure it out.
Am I on the right path? Thanks
Read the docs, Luke :-)
Use .container-fluid for a full width container, spanning the entire width of the viewport.
You are using .container-fluid, so you get a fluid, 100% width container. Use .container to get a fixed with container.
Here's a workig JSFiddle.
Also note you have an unbalanced </a> after Section, maybe just a copy-paste error here on SO.
To align the contents to .content width while keeping section background full-page width, you could nest a .container inside your .container-fluid:
.darkgrey {
background-color: #e9ecef;
}
.darkgrey .breadcrumb {
background-color: transparent;
margin-bottom: 0;
padding: .75rem 0;
}
.darkgrey + .container {
padding-top: .75rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid darkgrey">
<div class="container">
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href>Home</a></li>
<li class="breadcrumb-item">Section</li>
<li class="breadcrumb-item active" aria-current="page">
Test Post 3
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Test Post 3</h2>
<p> Lorem ipsum dolor sit amet... </p>
</div>
</div>
Important note: .containers can be placed inside .container-fluids but should not be placed inside another .container.
Another note: you probably don't need the CSS (from the screenshot it looks like your theme already handles that part, but I needed it on SO).
I am using the materialize CSS library and creating a nav bar the following way:
<div class="navbar-fixed">
<nav>
<div class="container">
<div class="nav-wrapper">
<p><img src="public/images/logo.png" /></p>
<span class="btn-open"></span>
<ul class="right hide-on-med-and-down">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
</div>
</nav>
</div>
However the image is not vertically aligned. I did try use the helpers of materialize CSS but still no success.
Any ideas what is wrong?
Materialize doesn't provide a helper class in this case, so just add your own:
.logo {
display: inline-block;
height: 100%;
}
.logo>img {
vertical-align: middle
}
Demo: http://www.codeply.com/go/466ZvBYbG2
I have an angular app with some nested views that might be causing the problem but I just can't pin it down. Whenever position: fixed is added to the sidebar the main content moves over and overlaps it. You can see whats happening at this page and here is some of my code, let me know if more is needed.
*Update
I tried combining the app.products and app.products.juice states and I still have the issue so I'm thinking it's my CSS and not the nested states
Controller
.controller('ProductsCtrl', function() {
$('#affix').affix({
offset: {
top: function () {
var $el = $('#productsBg');
return (this.top = $el.position().top + $el.outerHeight(true));
},
bottom: 50
}
})
})
SCSS
.ui-view-container {
position: relative;
}
.panelNav {
margin: 5% 0 0 5%;
&.affix {
top: 0;
}
}
State app
<header>
...
</header>
<div class="ui-view-container">
<main ui-view="mainContent"></main>
</div>
<footer id="footer">
</footer>
State app.products
<div class="container-fluid">
<div id=affix class="col-md-2 panelNav">
<div class="panel panel-primary">
<div class="panel-heading">Products Menu</div>
<div class="list-group">
<a class="list-group-item" ui-sref="app.products.juice">Juice</a>
<a class="list-group-item" ui-sref="app.products.mods">Mods</a>
<a class="list-group-item" ui-sref="app.products.batteries">Batteries</a>
<a class="list-group-item" ui-sref="app.products.tanks">Tanks</a>
</div>
</div>
</div>
<section class="col-md-9">
<ui-view name="productsContent"></ui-view>
</section>
</div>
State app.products.juice
<div>
<p> 10 paragraphs of filler text</p>
</div>
Update Jun 2017: As noted by #AdamPlocher my original suggestion below didn't clearly answer the question, here's a better illustration:
https://codepen.io/panchroma/pen/ZyOOdM
====
Original answer
See if this helps you :http://codepen.io/panchroma/pen/EKGXGj
When you apply position: fixed; to the sidebar, it takes it out of flow, and the main content moves to the left, into the space which had been occupied by the sidebar.
One option which I think should work for you is to leave the sidebar unchanged, and instead create a new child div and apply position:fixed; to this child div. (see below)
When you do this, the sidebar stays in-flow, doesn't collapse and the main content doesn't move left.
Hope this helps!
=== CSS ===
.panelNav{
position:absolute;
}
=== Original HTML ===
<div class="container-fluid original">
<div class="col-md-2 sidebar panelNav">sidebar</div>
<div class="col-md-9 main-content">main content</div>
</div>
=== Updated HTML ===
<div class="container-fluid">
<div class="col-md-2 sidebar">
<div class="panelNav">sidebar</div>
</div>
<div class="col-md-9 main-content">main content</div>
</div>
I am developing a bootstrap website that uses trianglify to generate background images for my hero div. I want text to go in the hero image, but it keeps pushing my image down.
HTML
<div>
<div id="heroImageContainer">
<div class="row">
<div class="col-lg-1 col-centered">
<p>Centered Text</p>
<p>more text</p>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Joshua</a>
</div>
<div>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
CSS
/*Universals*/
.col-centered{
float: none;
margin: 0 auto;
}
/*************/
#heroImageContainer{
width:100%;
height:400px;
}
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.0/trianglify.min.js"></script>
<script type="text/javascript">
var something = document.getElementById('heroImageContainer');
var dimensions = something.getClientRects()[0];
var pattern = Trianglify({
width: dimensions.width,
height: dimensions.height
});
heroImageContainer.appendChild(pattern.canvas());
</script>
Here is a working Fiddle of the problem
Fiddle
How about position the canvas and then add a z-index on to the content so it places the text infront
canvas{
position:absolute
}
.col-centered{
float: none;
margin: 0 auto;
z-index:10;
}
Following the example of TB, I have a navbar that is marked up as follows:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
</div>
I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar.
I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?
Just change the class container to container-fullwidth like this :
<div class="container-fullwidth">
Not sure if the navbar-static-top class was available prior to version 2.2.2 but I think you can accomplish your goal with the following:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
...
</div>
I put together a jsFiddle as an example.
Put the navbar out of your container:
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
<div class="container">
</div>
EDIT:
Here is one that I did with responsive navbar. The code fits the document body:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Link</li>
<li class="divider-vertical"></li>
<li>Link</li>
</ul>
<ul class="nav pull-right">
<li>Log out</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div> <!-- end container -->
<script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
I'm very late to the party but this answer pulls up top in Google search results.
Bootstrap 3 has an answer for this built in, set your container div in your navbar to container-fluid and it'll fall to screen width.
Like so:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>More Stuff</li>
</ul>
</div>
</div>
</div>
Put your <nav>element out from the <div class='container-fluid'>.
Ex :-
<nav>
......nav content goes here
<nav>
<div class="container-fluid">
<div>
........ other content goes here
</div>
</div>
You need to push the container down the navbar.
Please find my working fiddle here http://jsfiddle.net/meetravi/aXCMW/1/
<header>
<h2 class="title">Test</h2>
</header>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
</div>
Just replace <div class="container"> with <div class="container-fluid">, which is the container with no margins on both sides.
I think this is the best solution because it avoids some useless overriding and makes use of built-in classes, it's clean.
You can override some css
body {
padding-left: 0px !important;
padding-right: 0px !important;
}
.navbar-inner {
border-radius: 0px !important;
}
The !important is needed just in case you link the bootstrap.css after your custom css.
And add your nav html out of a .container
To remove the border-radius on the corners add this style to your custom.css file
.navbar-inner{
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
I know I'm a bit late to the party, but I got around the issue by tweaking the CSS to have the width span 100%, and setting l/r margins to 0px;
#div_id
{
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
You have to add col-md-12 to your inner-navbar. md is for desktop .you can choose other options from bootstrap's list of options . 12 in col-md-12 is for full width .If you want half-width you can use 6 instead of 12 .for e.g. col-md-6.
Here is the solution to your question
<div class="container">
<div class="navbar">
<div class="navbar-inner col-md-12">
<!-- nav bar items here -->
</div>
</div>
</div>