I'm new to bootstrap and HTML & CSS.
I was trying to use jumbotron on this website I'm trying to create but when I applied the background image I wanted it to fix a size even if the size of the window changed, in fact I wanted to do it on all of the website.
This is how the image is when full sized, and how I want it to be no matter the windows size
This is the image when I reduce the size of the window
And another thing somehow I got a bot and right margin on the website, I wanted to remove it, but I couldn't find from where it was coming .
Here's my HTML:
<!DOCKTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>WebHosting</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<!--NavBar-->
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div><!--NavBar END-->
<!--<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
</div>-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<!--<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>-->
</body>
</html>
And CSS:
body {
}
.jumbotron{
align-items:center;
display:flex;
background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size:cover;
background-color:#898888;
height:500px;
color:white;
}
You can use viewport units to get it.
body {
margin:0;
padding:0;
}
.jumbotron {
align-items: center;
display: flex;
background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size: cover;
background-color: #898888;
height: 50vh; /* Add this */
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>WebHosting</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<!--NavBar-->
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<!--NavBar END-->
<!--<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
</div>-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<!--<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>-->
</body>
</html>
Samuel, you can use
.jumbotron{
align-items:center;
display:flex;
background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size:cover;
background-position: top; /* position at the top */
background-repeat: no-repeat;
background-color:#898888;
min-height: 20em; /* height in relative units */
color:white;
}
Related
Let's assume we have a main menu and three rows afterwards. The first row should be at the top, the third at the bottom. The second row has to be centered vertically and horizontally.
When you scroll down you should be able to hide the main menu but everything else should fit in the page.
I know this, I know about justify-content-center and I played a bit around with this. But I can't put it together.
The second row is centered vertically but it stretches the height and it's not correctly centered horizontally anymore.
Here is what I tried:
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
html, body, {
height: 100%;
}
.header {
float: left;
width: 100%;
}
.full {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div id="nav">
<div class="container-fluid navbar-main">
<nav class="navbar navbar-expand-md no-padding navbar-main">
<div class="container">
<a class="navbar-brand" href="#">Main menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menü aufklappen">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/" role="button">Start</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col header">
<span id="score">first row </span>
</div>
</div>
<div class="row justify-content-center vertical-center" style="height:100%">
<!-- div to center -->
<div class="col-auto">
<span id="operand1">text</span>
</div>
<div class="col-auto">
<span id="operator">text</span>
</div>
<div class="col-auto">
<span id="operand2">text</span>
</div>
<div class="col-4">
<span id="operand2">text</span>
</div>
</div>
</div>
</body>
</html>
You should be using the "col-auto" for all the the divs in the 2nd row.
Have a look at this
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
html, body, {
height: 100%;
}
.header {
float: left;
width: 100%;
}
.full {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div id="nav">
<div class="container-fluid navbar-main">
<nav class="navbar navbar-expand-md no-padding navbar-main">
<div class="container">
<a class="navbar-brand" href="#">Main menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menü aufklappen">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/" role="button">Start</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col header">
<span id="score">first row </span>
</div>
</div>
<div class="row justify-content-center vertical-center">
<!-- div to center -->
<div class="col-auto">
<span id="operand1">text</span>
</div>
<div class="col-auto">
<span id="operator">text</span>
</div>
<div class="col-auto">
<span id="operand2">text</span>
</div>
<div class="col-auto">
<span id="operand2">text</span>
</div>
</div>
</div>
</body>
</html>
Wrap everything inside that row with a div that has a class called centered. For example, add position relative to the parent row and add css class:
.centered{position:absolute; top:50%; left:50%;}
How to increase height of menu bar in this code,
how decrease column size and height
how put a rich css for this design can anyone help me without any custom css.
in notice column data should display in that yellow color place only
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="newcss.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</nav>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar" id="side1">Links</div>
<div class="col-md-8">
<div class="page-header">
<h1>Student Management System</h1>
</div>
<p class="lead">Home Page.</p>
</div>
<div class="col-md-2 sidebar" id="side2">notice</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</body>
</html>
I didn't get your actual requirement, but menubar height can be increased by adding following CSS.
Note: This is a workaround, may not be responsive
.navbar{
height : 100px !important; /*keep your own height here*/
}
I am struggling with my body section. I am trying to add content to the body but for some reason it goes all to my navbar. I tried to add the header section to separate the content and it did but it still appears like it belongs to the navbar. Any suggestions?
<body>
<nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Synergo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Development</li>
<li>Advertising</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<header>
<div class="container centered">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Even more stuff</b><br/> some stuff</h1>
</div>
</div><!--/row-->
<div class="row mt">
<div class="col-sm-4">
<i class="ion-monitor"></i>
<h3>Project Management</h3>
</div><!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-chatboxes"></i>
<h3>Account Management</h3>
</div><!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-icecream"></i>
<h3>Sales & Lead generation</h3>
</div><!--/col-md-4-->
</div><!--/row-->
</div><!--/container-->
</div><!--H-->
</header>
html, body {
background: url(../img/01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin:0;
background:#eeeeee;
}
header {
text-align: center;
color: #fff;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
For one you have an extra div. And after that I find everything okay.
Please check the jsFiddle
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav id="tf-menu" class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Synergo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Development</li>
<li>Advertising</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="container centered">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Even more stuff some stuff</h1>
</div>
</div>
<!--/row-->
<div class="row mt">
<div class="col-sm-4">
<i class="ion-monitor"></i>
<h3>Project Management</h3>
</div>
<!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-chatboxes"></i>
<h3>Account Management</h3>
</div>
<!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-icecream"></i>
<h3>Sales Lead generation</h3>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
</div>
<!--/container-->
<!--H-->
</header>
</body>
Not sure what the problem is but the content seems right but the footer is creating problems. Then I get the scrolling. I would like to have the footer attached to the page.
</head>
<body>
<!-- Navigation
==========================================-->
<nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Synergo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Development</li>
<li>Advertising</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Home Page
==========================================-->
<div id="tf-home" class="text-center">
<div class="content">
<h1><strong>Your digital products from inception to go-to market strategy </strong></h1>
<div class="container centered">
<div class="row mt">
<div class="col-sm-4">
<i class="ion-monitor"></i>
<h3>Project Management</h3>
</div><!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-chatboxes"></i>
<h3>Account Management</h3>
</div><!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-icecream"></i>
<h3>Sales & Lead generation</h3>
</div><!--/col-md-4-->
</div><!--/row-->
</div><!--/container-->
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</div>
</footer>
footer {
background: #fff;
background: rgba(255,255,255,0.9);
}
footer p {
margin: 0;
padding: 50px 0;
}
html, body{
font-family: 'OpenSans', sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
background: url(../img/01.jpg) no-repeat center center fixed;
color: #5a5a5a;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
font-family: 'Lato', sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
color: #5a5a5a;
}
I'm trying to have a full width jumbotron with a background color. For some reason it is staying at the default layout with the gray background. I followed the code from the bootstrap website, so I don't know whats wrong.
In my index.html
<div class="jumbotron">
<div class="container-fluid">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
In my css:
.jumbotron {
position: relative;
background: #ff0000;
width: 100%;
height: 100%;
}
Seemed pretty straight forward...guess I was wrong.
DavidK, Hi there.
Here is a simple demo for you.
Using both ways to display the Jumbotron.
If you have a issue, and your custom css is not below the Bootstrap css link, then that could be your issue.
Use the FULL PAGE view to see it.
Or use this Fiddle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 200px;
}
.jumbotron {
background: #ff0000;
min-height: 25vh;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="jumbotron">
<div class="container bg-primary block">
...
</div>
</div>
<div class="container col-lg-12 spacer"></div>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
I can't align two divs horizontally at the same level in bootstrap. In fact, They are not a the same level horizontally, but either one below the other one (even if there is one left and another right) . In fact I want to align horizontally
and
That's why I used
followed by
.
here is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Dashboard Template for Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<br><br><br><br>
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<div></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</body>
</html>
From your code:
<div class="col-sm-3 col-md-2 sidebar">
[...]
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
[...]
</div>
The problem is that your grid has 3 + 9 + 3 (offset) = 15 columns on small screen (col-sm-X), and 2 + 10 + 2 (offset) = 14 columns on medium screen (col-md-X).
The bootstrap grid has only 12 columns by default.
Removing the offsets should make it work
<div class="col-sm-3 col-md-2 sidebar">
[...]
</div>
<div class="col-sm-9 col-md-10 main">
[...]
</div>
Your question isn't clear as to which elements you are trying to align left or right, however, the shortcut method in bootstrap to do this are the classes "pull-left" or "pull-right". From a CSS perspective, they are adding float: left and float: right to the elements.
http://getbootstrap.com/css/#helper-classes-floats
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Dashboard Template for Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar pull-left">
<br><br><br><br>
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main pull-right">
<h1 class="page-header">Dashboard</h1>
<div></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</body>
</html>
try the following class:
<div class="span6"></div>
<div class="span6"></div>
This would give the div a 50% width and align them correctly :)