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).
Related
anyone know how to keep the footer at the bottom of a reactive component when the component view changes? I currently have set the content to 100vh for the height CSS property, which works on first load. However, when I change the state which then changes the view, the footer stays in the same place, while the component's height grows as I add more elements. So then the footer is in the middle of the page again. Here is the component template:
<template>
<div id="app">
<div class="title-bar" data-responsive-toggle="navbar" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="navbar"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="navbar">
<div class="top-bar-left">
<ul class="menu">
<li class="brand">
NAME
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu" v-if="this.$cookies.get('user')">
<li><router-link class="link align-left" to="/sentences">Home</router-link></li>
<li #click="logout"><a>Logout</a></li>
</ul>
</div>
</div>
<div class="content-wrapper">
<router-view></router-view>
</div>
<!-- WHERE I AM HAVING THE ISSUE -->
<footer>
<p>© 2017</p>
</footer>
</div>
</template>
CSS:
footer {
background-color: #333;
height: 65px;
padding: 20px;
}
footer > p {
margin: 0;
}
Thanks for any ideas of how to solve this problem!
You can use nextTick that allows you to do something after you have changed the data and VueJS has updated the DOM based on your data change
method:{
this.$nextTick(() => {
this.scrollToEnd();
});
scrollToEnd: function () {
var messages = this.$el.querySelector(your component)
messages.scrollTop = messages.scrollHeight
}
}
Please try this methods to keep footer in the bottom in here
I am working on visual studio express 2013 and create a default project based on webform with default template as shown in link http://codepen.io/anon/pen/dPWzRd
For some reason Header & footer elements appear our their main wrapper as it is show in the codepen example. I tried to play around with few css properties but it breaks the design.
<header>
<div class="header-wrapper">
<div class="float-left">
<p class="site-title"> logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</div>
</div>
</header>
How can ii fix this so that Logo and menu items show inside the Header Wrapper (basically inside the red box) and same for the footer section
You can just use in CSS
display: inline-block;
instead of
float: left;
Full example:
.float-left {
display: inline-block;
}
It's because style float makes element "invisible" for parent. Style display: inline-block acts similar to float but is "visible".
when you have to element inside in other div and two div's are floating after that you need to add clear.
forked example
http://codepen.io/anon/pen/mymMMz
<header>
<div class="header-wrapper">
<div class="float-left">
<p class="site-title"> logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</div>
<div class="clear"></div>
</div>
</header>
.clear {
clear: both;
}
or add overflow hidden to .header-wrapper
Im having a problem with media queries and sidebar div with a fixed position.
Basically when the viewport gets too narrow the main content moves to the left and then sits under the sidebar. I tried to set position to static with the media queries, but then it doesnt work/look the way I want.
Here is the original fiddle: http://jsfiddle.net/ym7sQ/1/
#media (max-width: 991px) {
#sidebar {
position: fixed;
}
}
Here is the one with position static: http://jsfiddle.net/ym7sQ/2/
#media (max-width: 991px) {
#sidebar {
position: static;
}
}
You can see that the sidebar is inside the content, but I want it to be overlaying the top and bottom just as it is above 991px. Below 768 its going to stack which is okay because there is not enought space for sidebar and main content. Could you help me with this please? Thanks.
#media (max-width: 991px)
#sidebar {
position: fixed;
}
I think you should use this.
check it on http://jsfiddle.net/ym7sQ/14/show
Source: http://jsfiddle.net/ym7sQ/14/
Sorry for change a lot. But the main amendment is move the whole #sidebar element out of the container.
HTML:
<div id="top">
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
<h2>Home</h2>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-sm-3">
<nav role="navigation">
<ul>
<li class="active">Home</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<hr />
<p>info#domain.com
<br />123 456 789</p>
<p>Something something</p>
</div>
<div id="content">
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<section id="main">
<div id="slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placekitten.com/1280/720" alt="Slide 1" />
</div>
<div class="item">
<img src="http://placekitten.com/1280/720g" alt="Slide 2" />
</div>
<div class="item">
<img src="http://placekitten.com/1280/720" alt="Slide 3" />
</div>
</div> <a class="left carousel-control" href="#slider" data-slide="prev">
</a>
<a class="right carousel-control" href="#slider" data-slide="next">
</a>
</div>
<div class="main-bottom">
<img src="http://placekitten.com/300/300" alt="Image" /> <a href="contact.html">
<img src="http://placekitten.com/100/100" alt="France" />
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</section>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
<p>2013 © All rights reserved.</p>
</div>
</div>
</div>
</div>
The sidebar overlaps with main content is because the element .logo has fixed width(150px) and fixed left/right margin (both 40px), so the the whole width of the .logo element is 230px, which is larger than width of #sidebar element when the page is narrow enough, so #sidebar element is expanded.
Solution:
make the .logo element width dynamic, like:
.logo { width: 80%; margin: 40px auto 70px; }
Then you may have to use <img> tag to show the logo instead of using background.
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>
I want to create fluid layout using LESS and without using Bootstrap grid clasess like .span6 on html code. How can I do this?
When I wrote without LESS I create layout like this:
<div class="container-fluid">
<div class="row-fluid" id="header">
<div class="span4 block">
<h1 class="title">Sample Site</h1>
<h2 class="sub-title">Powered by Twitter Bootstrap</h2>
</div>
<div class="span6 block">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Pages</li>
<li>Typography</li>
<li>UI</li>
<li>Calendar</li>
<li>Tables</li>
</ul>
</div>
<div class="span2 block">
<div class="btn-group open">
<button class="btn">Dropdown</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Change password</li>
<li>Log in with another user</li>
<li>Change token</li>
<li>Log out</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid" id="slider">
<div class="span12 block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
Now, my layout looks next way:
<div id="wrap">
<div id="header">
<div id="logo">SiteLogo</div>
<div id="top-menu">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="logout">
Logout
</div>
</div>
<div id="slider">
and what I should write on my .less file if I want to make div#wrap -> .container-fluid,
div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2
without writting this clasess on html code?
First, this wouldn't really be semantic, at least, no more so.
The semantic form of <div id="top-menu"> is <nav> or <nav id="top">
The semantic form of <div id="header"> is <header>
In any case, there are instructions on doing this here:
Please stop embedding Bootstrap classes in your HTML
Honestly, though, it's not as simple as the author makes it look. Just because you have a <nav> inherit the styles of .nav from Bootstrap doesn't mean its children will inherit inherited styles as well.
So if I define a style from .nav ul, a <ul> element will not receive this style if it's in a <nav>.
This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(#span:1,#offset:0){
float: left;
#grid > .fluid .span(#span);
#grid > .fluid .offset(#offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(#offset);
}
}
Use them just like the non-fluid mixins:
div#header{
.makeFluidRow();
div#logo {
.makeFluidCol(4); //Spans 4 cols
}
div#top-menu {
.makeFluidCol(6); //Spans 6 cols
}
div#logout {
.makeFluidCol(2); //Spans 2 cols
//Or you could have span1, offset1 using .makeFluidCol(1,1);
}
}