I'm trying to use Bootstrap 4 to create a layout that has a gutter on each side. This layout has a nav row and a subnav row. I'm trying to create something that looks like this:
+-----------------------------------------------------------------------+
| Welcome Monday |
+-----------------------------------------------------------------------+
| Home 11.27.2017 |
+-----------------------------------------------------------------------+
| Content will go here and wrap multiple lines and fill up the |
| screen. |
| |
| |
| |
| |
+-----------------------------------------------------------------------+
I want to use the nav element for styling. In addition, I want to collapse the second row on mobile, which is another reason to use the nav element. Still, I can't seem to figure out how to use a gutter when in desktop mode. When I use a row, it doesn't use the full available width. Currently, I'm using the following code:
<div style="background-color:#eee;">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand text-light" href="#">Welcome</a>
<ul class="list-inline navbar-nav d-inline">
<li class="list-inline-item nav-item">Today is Monday</li>
</ul>
</nav>
<nav class="navbar navbar-light" style="background-color:#fff !important;">
<div class="row">
<div class="col-1"></div>
<div class="col-8">Home</div>
<div class="col-2 float-right">11.27.2017</div>
<div class="col-1"></div>
</div>
</nav>
<div class="row mx-0">
<div class="col-10 offset-1" style="height:400px;">
Content
</div>
</div>
</div>
How do I create a layout that includes gutters, while still using nav elements in Bootstrap 4?
no not tow navbars...do one navbar two UL's one gets the hidden on mobile d-flexbox class and make one of the ul's the one hiiden on mobile the toggler collapse target..
In summary:
One navbar and two UL's
the one hidden on mobile has also the collapse class is the target of your toggler and than you should not have to use any d-flexbox hide classes as you will mark the full navbar as expand md
Gutters are not on the outside but rather the inside. The concept comes from publishing books (paper, go figure). Consider adding pl-5 and pr-5 to each of the nav classes and content div class. This will add padding to each side effectively giving extra space where you want it.
Here is the link to Bootstraps spacing. https://getbootstrap.com/docs/4.0/utilities/spacing/
I hope this helps.
Related
I'm trying to use material2 sidenav component. I want it to be separate from content. Just a full-height sidebar that slides there and back - without any sidenav-layout as it creates some unwanted things in my app layout.
What I want looks really close to https://inbox.google.com/u/0/?pli=1 sidenav.
What I currently have is:
If you want to separate side bar and main content, Use the bootstrap column classes to achieve as below,
<md-sidenav-container class="container-fluid">
<div class="col-md-1">
<button md-button (click)="sidenav.open()">
<i class="fa fa-list"></i>
</button>
</div>
<div class="col-md-11">
Main content goes here
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<md-sidenav #sidenav class="example-sidenav">
Manu bar
</md-sidenav>
</md-sidenav-container>
Note:Break tags are added to increase the height of the content.
LIVE DEMO
I'm experimenting with Bootstrap 3.2. I'm trying to create a fixed at top navigation bar but I'm running into two problems:
The navigation bar overlaps the content below it.
The navigation bar seems to be going far off the screen to the right. This makes my button in the navigation bar not visible unless the window width is dragged to a smaller size.
For the first problem, I've followed the Bootstrap example tip by adding a class to my css file, including this file below the Bootstrap css file in the html document, and then referring to the class.
.navbar-height{
body{padding-top: 200px;}
}
<body class="navbar-height">
Though, this seems to do nothing (as you can see I specified the number really high hoping to see a dramatic change, which did not occur).
Here's my the navigation bar:
<header id="header-navigation">
<div id="nav-bar-container">
<nav id="nav-bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div id="nav-item-container" class="container-fluid">
<div id="drop-down" class="navbar-header">
<button type="button" class="btn btn-default navbar-btn navbar-toggle collapsed" data-toggle="collapse" data-target="#user-dropdown">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="home-button" class="navbar-left">
<a class="navbar-brand" href="#"><img alt="Brand" src=""></img></a>
</div>
</div>
<div id="user-dropdown" class="navbar-collapse collapse">
<ul class="dropdown-menu" id="dropdown-items" role="menu">
<li>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="" alt="icon"></img>
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Placeholder</h4>
<p class="list-group-item-text">Placeholder</p>
</div>
<div class="list-group-seperator"></div>
</div>
</li>
<li><span class="glyphicon glyphicon-log-out"></span></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
As a quick break down of the above code, I have a <header> tag which will hold the navigation bar. Within this <header>, I have a containing <div> (id="nav-bar-container") which only purpose is to act as a container for the navigation bar (maybe I'll add something else to the header and want to keep the bar seperate). Then, I have the actual <nav> which has the appropriate classes (or so I think): "navbar navbar-default navbar-fixed-top". The next <div> (id="nav-item-container") holds the components of the navigation bar. The following <div> (id="drop-down") contains the button (which seems to disappear at full-screen) and a link with a "brand", which always seems to be visible. The last major <div> contains the "drop down" content for when the button is pressed.
My Question: why is my navigation bar overlapping the content below it and over extending to the right hiding the button?
Ok, first thing, you don't need the <header> tag, so feel free to remove that.
Second, from the Docs on navbar-fixed-top, you need to have padding:
body { padding-top: 70px; }
Notice you applied it to the heading style; that won't work. Apply it to the body and it works fine.
As far as the 2nd issue, I don't actually see any horizontal scrolling when I removed the
<header> tag, so I think that may have been causing an issue.
Checkout this Bootply example:
Bootply Example
To see what I mean. It's your code with the tag removed. Hope that helps!
Change..
.navbar-height{
body{padding-top: 200px;}
}
to..
body.navbar-height{
padding-top: 200px;
}
You want the padding on the body itself. This will push you body down 200px giving you a gutter at the top for your fixed navbar.
most likely you'd want to adjust this padding depending on the actual height of your navbar.
As for problem number two, where I believed the navigation bar to be overflowing off the screen to the right, was just a mistake in the layout of the code. I was grouping the button I wanted to display on the right with the brand in the "navbar-header". What this does is display the brand but use that button only on a mobile screen to hide or show its associated dropdown. That is why I was only seeing the button when I made the width smaller by dragging the window. To fix this problem I removed the button and placed it within the appropriate code block. So, my "navbar-header" now looks like this:
<div id="drop-down" class="navbar-header">
<div id="home-button" class="navbar-left">
<a class="navbar-brand" href="#"><img alt="Brand" src=""></img></a>
</div>
</div>
Now, next within the id="nav-item-container" parent div, I create a list of items (ul). This list contains the items within the navigation bar and has the classes "nav navbar-nav navbar-right". Each list item (li) within this list is an item within the navigation bar. Dropdown buttons and their contents must be contained within the same list item (li). Make sure the parenting list item to the dropdown elements contains the class "dropdown". Then, the button or link should have the "dropdown-toggle" class applied to it. And the dropdown items themselves (which too can be a list of items and often is) should have the class "dropdown-menu". For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
<ul class="dropdown-menu" id="dropdown-items" role="menu">
<li>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="" alt="icon"></img>
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Placeholder</h4>
<p class="list-group-item-text">Placeholder</p>
</div>
<div class="list-group-seperator"></div>
</div>
</li>
<li><span class="glyphicon glyphicon-log-out"></span></li>
</ul>
</li>
</ul>
Note, in the snippet I didn't include the parenting nav, div, or header so it may not work exactly how it should. Also, I figured the majority of this out on my own by referencing the Bootstrap component page, as well as, the Bootstrap material design page (a plugin to Bootstrap that gives everything the Google Material Design look and feel). So, I'm not sure if all the "rules" I stated are mandatory or if there are other ways to achieve this.
As for problem number one, I just made a silly mistake with the css and the two other answers provided correct ways of fixing it. All I had to do was fix the body css like so:
body{
padding-top: 200px;
}
I’ve been working on this the whole day but don’t come up with a solution. I have 3 columns in one row in a container.
1: right content – pull-right
2: navigation – pull-left
3: main content
What it looks on big screens:
------------------------------------------------
| Menu | Content | Right Content |
------------------------------------------------
What it should look like on smaller screens:
----------------------------
| Menu | Right Content |
| |------------------
| | Content |
----------------------------
What it looks like now:
------------------
| Right Content |
------------------
| Menu | Content |
------------------
I think it’s just a simple floating problem. But I tried out nearly all possibilities.
Bootstrap 3
Using Bootstrap 3's grid system:
<div class="container">
<div class="row">
<div class="col-xs-4">Menu</div>
<div class="col-xs-8">
<div class="row">
<div class="col-md-4 col-md-push-8">Right Content</div>
<div class="col-md-8 col-md-pull-4">Content</div>
</div>
</div>
</div>
</div>
Working example: http://bootply.com/93614
Explanation
First, we set two columns that will stay in place no matter the screen resolution (col-xs-*).
Next, we divide the larger, right hand column in to two columns that will collapse on top of each other on tablet sized devices and lower (col-md-*).
Finally, we shift the display order using the matching class (col-md-[push|pull]-*). You push the first column over by the amount of the second, and pull the second by the amount of the first.
Try this...
<div class="row">
<div class="col-xs-3">
Menu
</div>
<div class="col-xs-9">
<div class="row">
<div class="col-sm-4 col-sm-push-8">
Right content
</div>
<div class="col-sm-8 col-sm-pull-4">
Content
</div>
</div>
</div>
</div>
Bootply
I have a following navbar code using twitter bootstrap
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
and the output is
When I remove "width: auto" from ".navbar .container{width:auto}" in bootstap.css the output becomes
and is the output I am expecting.
https://github.com/twitter/bootstrap/issues/2093 shows "width: auto" as an intended feature.What am I doing wrong here?
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
This should do it
I found another solution to the above issue.
Add navbar-fixed-top class to the main navbar div.
And add
.navbar-fixed-top{
position: relative;
}
to your css rule.
This restricts the menu from pulling it to the left and worked fine while I was developing a theme for wordpress.
If you look at the Bootstrap basic nav bar example you will see that there is a margin on either side of the navbar. This is because for a non-fluid container, your page will occupy a fixed width and the navbar uses that width.
If you want the navbar to extend across the entire page, you need to use a class="container-fluid" but in a fluid layout, the menu items (by default) will flow from the left-hand side of the page.
In your code, you are using both container and container-fluid which is incorrect, and as per the Bootstrap documentation, you need to place the nav in a container - not embed a container in your nav tags.
I solved this by removing the width: auto definition from .navbar .container in bootstrap.css.
Not an ideal solution (editing bootstrap.css in general) but it was much simpler than applying all the responsive widths to the selector.
I am trying to put together a page that has a header that spans accross the page.
the header contains menu items and looks something like this (ASCII rendering below)
<------ Fixed Width ----------> <----------- Variable Width (Depends on Screen Width) -->
-----------------------------------------------------------------------------------------
LOGO HERE (Fixed Width) | Menu One | Menu Two | menu Three | Menu Four
| | | |
-----------------------------------------------------------------------------------------
I have designed this in HTML like this:
<div id="topMenu">
<div id="topMenuLogo"><!-- flash logo stuff here --></div>
<div id="topMenuContainer">
<div id="topMenuTopBar" class="right-align">
<div class="useroption floatleft">Action 1</div>
<div class="useroption floatleft">Action 2</div>
<div class="spacer"> </div>
</div>
<div id ="topMenuNavBar">
<div id=topmenuMenuContainer">
<ul>
<li>Menu One</li>
<li><!-- Other menus follow below ...... --></li>
</ul>
</div>
</div>
<div class="spacer"> </div>
</div>
<div class="spacer"> </div>
</div>
where the CSS class 'spacer' matches the pattern {height:1px;clear:both;}
I want to be able to write the above so that the page dynamically expands to fit the screen regardless of the resolution. The logo has a fixed width so that does not change, but I want the topMenuContainer dive element to adjust its width dynamically depending on the screensize. basically, that element will contain the following:
A topMenuContainer element that expands or contracts depends on
the screen resolution
A topMenuTopBar that is floated right within the topMenuContainer element
A topMenuNavBar that is floated left within the topMenuContainer element
I would be very grateful if someone could show the CSS required to structure the above HTML snippet in the manner I have described.
This should be your #1 resource for general layout questions like these:
http://layouts.ironmyers.com/
You will find any CSS layout you could possibly want on his site. If you don't know CSS yet, you can check out the tutorials at w3schools:
http://www.w3schools.com/css/