Hi,
I am using bootstrap 2.3.2 version and I want to remove “span3 - left margin” and “span9 - left and right margin” to align header level, i have tried offset but it doesn’t work please suggest me how i can remove these left and right margins…
Thanks
html code:
Sticky footer · Twitter Bootstrap
<!-- CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/ticket-style.css" rel="stylesheet">
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding-top: 60px;
}
.container .credit {
margin: 20px 0;
}
code {
font-size: 80%;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row">
<div class="span3 leftNavContent">
<ul class="nav nav-list nav-list_">
<div class="quickLinks">
<div class="LastloginInfo">
<strong>Last Login</strong> 9/22/2014 02:52:39 AM
</div>
<ul>
<li><a href="#" class="current">Manage Tickets (198)</a></li>
<li><a href="#">Support Tickets</a></li>
<li><a href="#">Billing Tickets</a></li>
<li><a href="#">Order Tickets</a></li>
<li><a href="#">Ticket Reports</a></li>
</ul>
</div>
</ul>
</div>
<div class="span9">
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
</div>
</div> <!-- ROW -->
</div> <!-- container -->
<div id="push"></div>
</div> <!-- wrap -->
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
PaulOB
October 21, 2014, 4:33pm
2
HI,
You can probably remove the margins if you do this:
.span3.leftNavContent{margin-left:0;}
.span9.breadcrumbwrap{margin-right:0;margin-left:0}
Then add the extra breadcrumbwrap class here:
<div class="container-fluid">
<div class="row">
<div class="span3 leftNavContent">
<ul class="nav nav-list nav-list_">
<div class="quickLinks">
<div class="LastloginInfo"> <strong>Last Login</strong> 9/22/2014 02:52:39 AM </div>
<ul>
<li><a href="#" class="current">Manage Tickets (198)</a></li>
<li><a href="#">Support Tickets</a></li>
<li><a href="#">Billing Tickets</a></li>
<li><a href="#">Order Tickets</a></li>
<li><a href="#">Ticket Reports</a></li>
</ul>
</div>
</ul>
</div>
<div class="span9 breadcrumbwrap">
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
</div>
</div>
<!-- ROW -->
</div>
<!-- container -->
Remember though you should never change the bootstrap classes but instead add your own class and modify the rules that way. If you change the bootstrap class then you destroy the whole point of having a grid
If you find yourself over-riding the styles all the time then come out of the grid and create your own rules instead.
Thanks for reply paul,
thanks
PaulOB
October 21, 2014, 7:15pm
4
I’ll need your exact code and css to work out where your differences are. Your example code that you posted shows a full width header filling the whole browser but your screenshot seems to suggest something else. Do yo have a working example?
If not build a template page something like the following that you can paste in here:
e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<style></style>
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html, body {
height: 100%;/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
max-width:1180px;
}
/* Set the fixed height of the footer here */
#push, #footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding-top: 60px;
}
.container .credit {
margin: 20px 0;
}
code {
font-size: 80%;
}
.span3.leftNavContent {
background:red
}
.span9.breadcrumbwrap {
margin-right:0;
margin-left:0;
}
.span9.breadcrumbwrap .breadcrumb{margin-right:-30px}
@media screen and (max-width:1199px){
.span9.breadcrumbwrap .breadcrumb{margin-right:-15px}
}
@media screen and (max-width:767px){
.span9.breadcrumbwrap .breadcrumb{margin-right:0}
}
</style>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://getbootstrap.com/2.3.2/assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="http://getbootstrap.com/2.3.2/assets/ico/favicon.png">
</head>
<body>
<div id="wrap">
<div class="container-fluid">
<div class="row">
<div class="span12">
<!-- Fixed navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<button type="button" 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> </button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row">
<div class="span3 leftNavContent">
<ul class="nav nav-list nav-list_">
<div class="quickLinks">
<div class="LastloginInfo"> <strong>Last Login</strong> 9/22/2014 02:52:39 AM </div>
<ul>
<li><a href="#" class="current">Manage Tickets (198)</a></li>
<li><a href="#">Support Tickets</a></li>
<li><a href="#">Billing Tickets</a></li>
<li><a href="#">Order Tickets</a></li>
<li><a href="#">Ticket Reports</a></li>
</ul>
</div>
</ul>
</div>
<div class="span9 breadcrumbwrap">
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
</div>
</div>
<!-- ROW -->
</div>
<!-- container -->
<div id="push"></div>
</div>
<!-- wrap -->
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
The above seems to be more or less what you are aiming at.
As I mentioned before it would usually be easier to come out of the grid to do things that do not fit inside the grid by default,
