Hide sidebar with bootstrap - html

How can I hide the side bar in mobile?
CSS:
.sidebar-nav {
padding: 9px 0;
}
.sidebar-nav .nav-header {
font-size: 18px;
color:#FF9900;
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Content Management</li>
<li>test</li>
<li>test2</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="col-md-9">
<div class="container">
<div class="row">
.....
</div>
</div>
</div>
</div>
</div>

<div class="col-md-3 hidden-xs">
The "mobile" breakpoint default is 767px. To hide something at that size, just put .hidden-xs on it. There is no need to do anything else. If you don't want it to show at the small min width add .hidden-xs .hidden-sm OR you can just add .visible-md .visible-lg
http://jsbin.com/AmaVUcib/1/edit

Put this in your css, preferably at the bottom. This will hide the sidebar for any screen less than 651px. Adjust the number of pixels to how you want.
#media screen (max-width: 650px) {
.well .sidebar-nav {
display: none;
}
}
Here's a link with more info https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

In bootstrap 4, use add the following classes to hide on xs and sm devices
.d-none .d-sm-none .d-md-block
Read more here

Related

how to makeboostrap4 column fit to its content

I have below container with two rows. first row is header and second row has left nav bar and main content on right.
i want the left nav bar shrink to the width of the content. It shrinks to just icons when i press a toggle button of nav bar. in its default position it is expanded to show icons plus labels. When user resizes screen to small devices the nav bar should only show icons.
<div class="row h-100">
<div
class="col-12 w-100 sticky-header"
style="background-color: darkgrey;"
>
<h1>This is top header<h1/>
</div>
<div class="col-2">
<div class="fixed-box col-2">
<h1>SideNavBar</h1>
<ul>
<li>
<router-link class="nav-link" to="/contacts">
<img :src="ContactsImage" />
<span>Contacts</span>
</router-link>
</li>
<li>
<router-link class="nav-link" to="/home">
<img :src="HomeImage" />
<span>Home</span>
</router-link>
</li>
<li>
<router-link class="nav-link" to="/help">
<img :src="HelpImage" />
<span>Help</span>
</router-link>
</li>
</ul>
</div>
</div>
<div class="col-10 bg-warning h-100 no-gutters">
<p>This is main content you see when you click a link on left<p/>
</div>
</div>
</div>
</div>
#media only screen and (max-width: 768px) {
.sidenavbar span {
display: none;
}
.sidenav {
width: 75px !important;
}
}
.sidenav {
width: 150px !important;
}
I could achieve the desired functionality by using css style to apply a different width for side nav bar column. But it leaves out col-2 with space not used by side nav. Is there a way to make col-2 to shrink to the size of its content. And make the main content col-10 to take up .
In bootstrap 4 you can add responsive classes such as d-none, d-md-none etc.
https://getbootstrap.com/docs/4.0/utilities/display/
This will hide the <span></span>, containing the text, on mobile devices.
Here's a codeply example https://www.codeply.com/p/taMk8vmbJl
On mobile it will hide the <span> element and only display icons.
Also by changing col-10 to col-md-10 it'll display content under 'SideNavBar' on mobile.

Inline responsive menu with Twitter Bootstrap 3

I'm trying to create a responsive header in my app with the following elements:
a logo (<img>)
a search bar (<input>)
a link (<a>)
two boxes (<div>)
Elements position depends of the screen size:
Medium screens (md-*)
Small screens (sm-*)
Extra small screens (xs-*)
I manage to create each of these layouts, but not with the responsive classes of Bootstrap... Can you help me here?
Here is the simple code I used to make this example:
<div class="container">
<div class="row vertical-aligned">
<!-- Logo -->
<div class="col-md-2 col-sm-12 col-xs-12">
<img class="logo" src="http://pngimg.com/upload/cocacola_PNG14.png"/>
</div>
<!-- Search bar -->
<div class="col-md-7 col-sm-6 col-xs-12">
<div class="input-group search-width">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<a>Launch advanced research...</a>
</div>
<!-- Nav boxes -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="nav-button">Profil</div>
<div class="nav-button">Settings</div>
</div>
</div>
</div>
JSFiddle here
I solved the issue, i found 2 problems.
The first one with your md screen, the input field and the paragraph would not stay inline, because of the float property, this would be solved by editing the css of the .input-group class as float left. The second problem for the small screen, is that the div will not stack over one other with a 100% width because you set the css property display: flex and center, I created a media query for the window size of small (<768px) to display those div as inline-block. Please comment for any additional help or problems, the code below should be working fine.
UPDATE - Solving the additional requirements for the md and sm size:
For the first problem i added padding top to the id=link, in a media query that will target only md devices, for the second problem with media queries i edited the position of those divs with position relative and left/top attributes.
Thanks
Fabrizio Bertoglio
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row vertical-aligned">
<!-- Logo -->
<div class="col-md-2 col-sm-12 col-xs-12">
<img class="logo" src="http://pngimg.com/upload/cocacola_PNG14.png"/>
</div>
<!-- Search bar -->
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="row">
<div class="input-group col-md-6">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<div class="col-md-4" id="link">
<a>Launch advanced research...</a>
</div>
</div>
</div>
<!-- Nav buttons -->
<div class="col-md-3 col-sm-12 col-xs-12" id="boxes">
<div class="nav-button">Profil</div>
<div class="nav-button">Settings</div>
</div>
</div>
</div>
Css Code
</body>
</html>
.vertical-aligned {
display: flex;
align-items: center;
}
.logo {
width: 100%;
display: block;
}
.nav-button {
height: 70px;
width: 80px;
border: solid 1px black;
display: inline-block;
}
.input-group {
float: left !important;
}
#media (min-width: 992px) {
#link {
padding-top: 6px;
}
}
#media (max-width: 768px) {
.vertical-aligned {
display: inline-block;
}
#boxes {
max-width: 300px;
position: relative;
left: 100%;
transform: translateX(-179px);
top: -5%;
}
a {
position: relative;
top: 49px;
}
}
I hope this answer can help you.
You can use #media to manage every element size in different layout,
for example, on laptop layout:
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
//your css here
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
//your css code here
}
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://www.youtube.com/watch?v=t526Lt_O7zo

Bootstrap layout outside of container

I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}

Cannot get side menu scrollspy to stick on top

I just started with bootstrap 3 and got stuck on an issue. I wanted to have a side menu like in this documentation which is positioned fixed during scroll down and highlights sections accordingly. I have managed to get something done very similar to this but when I resize the window to mobile size, the side menu overlaps the content instead of being on top of it. If you checked the link, when you resize the window, the sidemenu goes on top of the content.
I believe the culprit here is affix-top but I leave it to the experienced people here in stackoverflow
<body data-spy="scroll" data-target="#myScrollspy">
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Title
<small>Subheading</small>
</h1>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Sidebar Menu -->
<div class="col-md-2" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" >
<li class="active">Section One</li>
<li>Section Two</li>
<li>Section Three</li>
<li>Section Four</li>
<li>Section Five</li>
</ul>
</div>
<!-- Content Column -->
<div class="col-md-9">
<h2 id="section-1">Section One</h2>
<h2 id="section-2">Section Two</h2>
<h2 id="section-3">Section Three</h2>
<h2 id="section-4">Section Four</h2>
<h2 id="section-5">Section Five</h2>
</div>
</div>
</div>
</body>
How can this be fixed?
What you are looking for is called a CSS media query, which allows you to modify a style rule based on media features such as color, height, and width. The Bootstrap page you linked to uses min- and max-width features to change how the sidebar appears, which you can see in its CSS filenear the bottom of the page. The pertinent code looks like this:
#media (min-width: 768px) {
/* Adjust sidenav width */
.bs-docs-sidenav {
width: 166px;
margin-top: 20px;
}
.bs-docs-sidenav.affix {
top: 0;
}
}
#media (max-width: 767px) {
/* Sidenav */
.bs-docs-sidenav {
width: auto;
margin-bottom: 20px;
}
.bs-docs-sidenav.affix {
position: static;
width: auto;
top: 0;
}
}
I have simplified it a little bit, but that should be enough to get you started. When the max-width is less than 768px the sidebar width will change to auto, and the affix code will keep the sidebar at the top of the page.

Need Help Assigning Correct Media Queries

Can someone please help me to apply the right media query on a responsive Bootstrap one page template I'm working on.
I managed to show the toggle menu button from 240px to 640px width instead of up to 980px, but I can't manage to show the main navigation menu from from 640px to 980px.
After 980px it displays fine again.
Here the media query I created for the toggle menu button:
#media (min-width: 639px) {
.btn-navbar {
display: none;
}
}
And here the html for the whole header section:
<!-- header -->
<div class="masthead">
<div class="stripes"></div>
<div class="container">
<!-- button for small devices-->
<div class="row no-margin">
<div class="span12">
<div class="hidden-desktop"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-align-justify"></span></a></div>
<div class="brand"> <img src="img/logo.png" alt="" /></div>
<!-- navigation -->
<div class="navbar main-nav">
<div class="nav-collapse collapse" >
<ul class="nav pull-right ">
<li>Home</li>
<li>Intro</li>
<li>Amulets</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- end navigation -->
</div>
<!-- end container -->
</div>
<!-- end header-->
I tried everything I can think of but can't manage to get it right.
Any help would be very much appreciated.
Well you could try simply using the !important directive:
#media (min-width: 639px) {
.btn-navbar { display: none !important; }
}
Granted, this is not the most elegant solution.
But your problem seems to have to do with your styles, not your markup.
It is most likely to be conflicting styles.
I think for this one, we'll have to look deep into the whole stylesheet to find the problem.
Also, note that the .btn-navbar link is inside a <div> with a .hidden-desktop class.