i have a problem with the famous scrollspy of Bootstrap 3, i am trying and trying and nothing work. i set the data tags in body and named the .nav in the navigation here is the code:
<body data-spy="scroll" data-offset="150" data-target="#navegacion">
<div class="container">
<!-- row 1 NAVIGATION -->
<header>
<nav class="nav navbar navbar-right navbar-fixed-top" id="navegacion" name="" value="" placeholder="" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navegacion">
<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="#">
<img src="img/logo.jpg" alt="">
</a>
</div><!--navbar collapse-->
<div class="collapse navbar-collapse" id="navegacion">
<ul class="nav navbar-nav navbar-right" role="tablist">
<li class="active">ABOUT US</li>
<li>PRODUCTS</li>
<li>MEDIA</li>
<li>CONTACTS</li>
<li>EN</li>
<li>/</li>
<li>DE</li>
</ul>
</div><!-- navbar collapse-->
</nav>
</header>
i think i set all the tags correctly in the body, here is a part of the code:
<!-- row 2 ABOUT US -->
<div class="row" id="aboutUs">
<div class="col-lg-3 col-md-4">
<h2><strong>ABOUT US</strong></h2>
<img src="img/news.jpg" width="264px" height="190">
</div>
<div class="col-lg-9 col-md-8">
<br/>
<br/>
<br/>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
<!-- row 2 ABOUT US END-->
When i am over the nav with the mouse cursor i see the hover effect but nothing changes, when i click the menu, for example #aboutUs the document go to the correct position where the secction #aboutUs are but not active the button.
anyone have the same problem?
Related
I'm working on a project which has multiple links on first page. If a link is clicked application is routed to respective page with some delay. During that delay application shows a loader. But loader is displayed only for the first time I click on a link. It doesn't appear when I go back to first page and then click on a link loader doesn't appear.What may be the reason and how can I solve this problem?? Below is the HTML snippet:
<template>
<!-- MAIN MENU START -->
<require from="bootstrap/css/bootstrap.css"></require>
<nav class="navbar navbar-default topMenu" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<!-- Remove button that appears for xs devices
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>-->
<a class="navbar-brand nameEllipsis" id="routeTitle">${router.title}</a>
<!-- Collect the nav links, forms, and other content for toggling
.Remove this div to remove collapse features
.change display of both ul to inline-block so that they appear inline
.float 2nd ul to right to bring li to right and inline
.float 1st li of 2nd ul to left so that it displays according to the format of md and lg devices
<div class="collapse navbar-collapse" id="navbar-collapse-1"> -->
<ul style="display:inline-block;" class="nav navbar-nav navbar-left">
<li ><span class="fa fa-home"></span></li>
</ul>
<ul style="float:right;display:inline-block;" id="navigatingIcons" class="nav navbar-nav navbar-right">
<li style="float:left;" ><span class="fa fa-filter"></span></li>
<li ><span class="fa fa-cog"></span></li>
<li class="loader" show.bind="router.isNavigating">
<i class="fa fa-spinner fa-spin fa-2x"></i>
</li>
</ul>
<!-- </div>--> <!-- /.navbar-collapse -->
</div>
</nav>
<div class="">
<router-view></router-view>
</div>
</template>
Above image when application is being routed for the first time. Also, aurelia-hide class is not present for the first time.
Above image when application is routed after first time, aurelia-hide class is not removed and loader doesn't appear.
Thanks.
So I'm running into an issue with my navbar and media queries. I can get it to switch from regular logo to a smaller logo with no problems. The visible-sm class is giving me issues as for the life of me, I cannot get the text links to the right to reduce the margin forcing the smaller logo up and making the navigation a horror. Did I miss something in the documentation? It seems like something really simple to reduce the rela estate the links are using when hitting the 767px media query. I apologize in advance if this has already been answered I couldn't find a question specific to this issue.
Here be a picture
Here be the Bootply
Here be my HTML
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 visible-xs" href="#"><img src="images/logobug.jpg" alt="" /></a>
<a class="navbar-brand visible-sm" href="#"><img src="images/logosm.jpg" alt=""></a>
<a class="navbar-brand visible-md" href="#"><img src="images/logomd.jpg" alt=""/></a>
<a class="navbar-brand visible-lg" href="#"><img src="images/logolg.jpg" alt=" Logo" /></a>
</a>
</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 pull-right">
<li>HOME</li>
<li> EVENTS</li>
<li>CONTACT US</li>
<li>DIRECTIONS</li>
<li>SPONSERS</li>
<li>VENUES</li>
<li>ABOUT</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Here be my CSS:
.navbar-right {
float: right;
margin-right: -25 px;
}
I think that's what you want , I removed pull right because navbar right do the same
a forked bootply
I am designinig a template to display a product image[i] and description[d] as following using twitter bootstrap 3 (Thing is I am not able to keep image and description together, they keep jumping around with different screen sizes)
REQUIREMENT:
1) for LARGE and MEDIUM it will be 2 columns
| |
|[i][d] [i][d]|
|[i][d] [i][d]|
|[i][d] |
| |
2) for SMALL it will be like 1 column (description still needs to be on its side)
| |
| [i][d] |
| [i][d] |
| [i][d] |
| [i][d] |
| [i][d] |
| |
3) for EXTRA SMALL it will be like 1 column but description will follow image
| |
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
| |
PROBLEM:
I have problem here with small screen as I get lot of space between [i] and [d]
|[i] [d]|
|[i] [d]|
|[i] [d]|
|[i] [d]|
|[i] [d]|
Also at some screen size (between medium and small) image of one row sticks itself at bottom of previous description
|[i] [d]|
| [i]|
|[d] [i]|
|[d] |
CODE:
I have the following HTML code that I am trying
<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="">
<title>2 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Start Bootstrap</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">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Page Heading
<small>Secondary Text</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Project Row -->
<div class="row">
<div class="col-lg-6">
<div class="col-xs-6 col-sm-3 col-md-4">
<a href="#">
<img class="img-responsive" src="http://placehold.it/140x200" alt="">
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-8">
<h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div class="col-lg-6"> <!--I want this to behave like two rows, at small screen at some size image sticks itself at the bottom of previous View Project button-->
<div class="col-xs-6 col-sm-3 col-md-4">
<a href="#">
<img class="img-responsive" src="http://placehold.it/140x200" alt="">
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-8">
<h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
<!-- /.row -->
<!-- Project Row -->
<div class="row">
<div class="col-lg-6">
<div class="col-xs-6 col-sm-3 col-md-4">
<a href="#">
<img class="img-responsive" src="http://placehold.it/140x200" alt="">
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-8">
<h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
»
</li>
</ul>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery not used yet-->
<script src="js/jquery.js"></script>
-->
<!-- Bootstrap Core JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Following is custom style.css just in case
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.portfolio-item {
margin-bottom: 25px;
}
footer {
margin: 50px 0;
}
h3 {
margin-top:0;
}
Thanks
Several issues:
You didn't nest your columns correctly and neither did the person who answered the question initially. Re-read the docs and look at the examples. When you nest columns inside columns you have to nest the row and use the same structure .row .col- .row .col-
Unnecessary use of col-X-12 in the case of the .page-header and the .pagination and .footer. If something is always fullwidth, don't use the grid system. This is in the documentation.
img-responsive makes images not go past their natural width, but the Bootstrap grid is fluid so at any given viewport width there will be a large gap unless you use larger images to compensate.
Every 12 columns at any given breakpoint requires a .clearfix using a responsive utility class or a new .row.
DEMO: https://jsbin.com/kubele
Mobile first basics:
col-sm = viewports 768px and up so if something is col-sm-4 that's the same as
col-md-4 and col-lg-4 and UNDER this will be full width.
col-md = viewports 992px and up so if something is col-md-8 it's the same as
col-lg-8 and UNDER that will be full width.
col-lg = viewports 1200px and up so if something is col-lg-8 anything under will be full width.
col-xs = covers all viewport sizes from 0 and up.
CSS:
Notes: Most people agree that 767px is a very high breakpoint for a lot of small viewport situations, to solve this on a case by case basis, and not write a crap load more code, the classes .col-xs-* were used and then CSS is used at the max-width to make the columns go full width. Bootstrap lacks vertical space unless you wrap your .btn in a <p> like all the examples you will find on their site and you'll also notice the lack of image next to text as the margins don't line up out of the box, this has been corrected.
body {
padding-top: 70px
}
.row.project-row > [class*="col-"] {
margin-bottom: 2%
}
#media (max-width:380px) {
.row.project-row [class*="col-"] {
width: 100%
}
}
#media (min-width:381px) {
.project-title {
margin-top: 0
}
}
HTML:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Start Bootstrap</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">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<h1 class="page-header">Page Heading
<small>Secondary Text</small>
</h1>
<!-- Project Row -->
<div class="row project-row">
<!-- BEGIN grouping -->
<div class="col-md-6">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#">
<img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
</a>
</div>
<!-- /.col-sm-4 col-xs-4 -->
<div class="col-sm-8 col-xs-8">
<h3 class="project-title">Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
</div>
<!-- /.col-sm-8 col-xs-8 -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-md-6 -->
<!-- END grouping -->
<!-- BEGIN grouping -->
<div class="col-md-6">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#">
<img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
</a>
</div>
<!-- /.col-sm-4 col-xs-4 -->
<div class="col-sm-8 col-xs-8">
<h3 class="project-title">Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
</div>
<!-- /.col-sm-8 col-xs-8 -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-md-6 -->
<!-- END grouping -->
<!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
<div class="clearfix hidden-sm"></div>
<!-- BEGIN grouping -->
<div class="col-md-6">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#">
<img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
</a>
</div>
<!-- /.col-sm-4 col-xs-4 -->
<div class="col-sm-8 col-xs-8">
<h3 class="project-title">Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
</div>
<!-- /.col-sm-8 col-xs-8 -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-md-6 -->
<!-- END grouping -->
<!-- BEGIN grouping -->
<div class="col-md-6">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#">
<img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
</a>
</div>
<!-- /.col-sm-4 col-xs-4 -->
<div class="col-sm-8 col-xs-8">
<h3 class="project-title">Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
</div>
<!-- /.col-sm-8 col-xs-8 -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-md-6 -->
<!-- END grouping -->
<!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
<div class="clearfix hidden-sm"></div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="text-center">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
»
</li>
</ul>
</div>
<hr>
<!-- Footer -->
<footer>
<p>Copyright © Your Website 2014</p>
</footer>
</div>
<!-- /.container -->
It looks like you need to be a little more explicit when specifying your columns. You can probably get what you want by specifying the column widths on the immediate children of the row divs.
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<!-- Image Content -->
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<!-- Description -->
</div>
</div>
</div>
I made a Bootply as an example.
I'm trying to make a carousel of text only.
I copied the original example from http://getbootstrap.com/javascript/#carousel, removed the images and look at some other examples.
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item active">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
http://jsfiddle.net/yamikep/esy38/15/
However, the indicators are not well aligned now. What makes that happen?
Is there a simple way to have a carousel of text with bootstrap?
Thanks
The .carousel-indicator class has absolute positioning. The bottom property is set in media queries. You can override this in your css by adding the following:
.carousel-indicators {
bottom: 0;
}
I,m trying to make a responsive website using bootstrap3 that is 3-column in large screens and 2-column in medium:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4" id="sidebar1"></div>
<div class="col-lg-6 col-md-8" id="main"></div>
<div class="col-lg-3 col-md-4" id="sidebar2"></div>
</div>
</div>
http://www.bootply.com/yfJF1flD0V
but this code not working properly and on medium size, sidebar2 goes in a new row and i want sidebar2 goes below sidebar1 directly. how can i do that?
You've got to duplicate some of your content and use hidden-lg and visible-lg.
DEMO ON BOOTPLY
<div class="container">
<div class="row">
<!-- on md only -->
<div class="col-md-4 hidden-lg">
<div class="row">
<div class="col-md-12 grey1">
Sidebar 1 md - Lorem ipsum dolor sit amet...
</div>
<div class="col-md-12 grey2">
Sidebar 2 md - Lorem ipsum dolor sit amet...
</div>
</div>
</div>
<!-- on lg only -->
<div class="col-lg-2 visible-lg">
Sidebar 1 lg - Lorem ipsum dolor sit amet...
</div>
<div class="col-lg-2 col-lg-push-8 visible-lg">
Sidebar 2 lg - Lorem ipsum dolor sit amet...
</div>
<!-- on all -->
<div class="col-md-8 col-lg-pull-2">
Main all - Lorem ipsum dolor sit amet...
</div>
</div>
</div>
Because of the requirement to stack your sidebars on md screens with main content to their right, you've got to put the sidebars in a containing column. But that containing column then makes it so you can't bookend your sidebars around that same main content in lg screens. Hence the need to use visible and hidden. I always feel like they're a bit clunky, but otherwise I think you won't get exactly what you want...
I do it with jQuery.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4" id="sidebar1"></div>
<div class="col-lg-6 col-md-8" id="main"></div>
<div class="col-lg-3 col-md-4" id="sidebar2"></div>
</div>
</div>
and jQuery:
function mediumResponsive() {
// Reset everything
$( '#main>div' ).removeClass('col-md-8');
$("#sidebar1").next().andSelf().unwrap();
$( "#sidebar2" ).insertAfter( $( "#main" ) );
if ($('#is-md').is(":visible")) {
// Do medium responsive
$( "#sidebar2" ).insertAfter( $( "#sidbar1" ) );
$("#sidebar1").next().andSelf().wrapAll('<div class="col-md-4"><div class="container-fluid"');
$( '#main>div' ).addClass('col-md-8');
};
};
$(document).ready(mediumResponsive);
$(window).bind( "resize", mediumResponsive );
and it works.
Please tell me your comments.