Im using twitter-bootstrap in my rails app
i was following this tutorial : http://untame.net/2012/08/twitter-bootstrap-build-a-stunning-two-column-blog/
and i have the same span 8 main element with a span4 widget sidebar
but for some reasons it looks like this : http://s11.postimage.org/y2cf9wlrn/Bootstrap_Sidebar_fail.png
does anyone know what is going on ? i have tried to increase the container size & lowering the main elements span size but that doesn't help
btw the app is responsive
here is how my layout file looks
<div class="navbar navbar-inverse navbar-fixed-top">
#navbar removed for clearer code
</div><!-- end of Navbar -->
<div class="container">
<div id="myCarousel" class="carousel slide">
#carousel removed for clearer code
</div> <!-- Carousel items -->
<div id="user_nav" float="left">
#removed for clearer code
</div><!-- Flash messages-->
<div class="row">
<div class="span8">
<div class="hero-unit">
<!-- page specific content is loaded here -->
<%= yield %>
</div>
</div><!-- end main area -->
<aside class="span4"><!-- Sidebar starts here -->
<div class="row">
<div class="widget span4">
#widget removed
</div><!-- end widget -->
</div><!-- end widget row -->
</aside><!-- end sidebar -->
</div><!-- end row -->
#footer removed
</div><!-- end container -->
it seemed like you had some opened div tags that werent closed.. so checking your source for that would help it as the layout you posted seems to be correct
Are you sure that your ".span8" and ".span4" elements are inside ".container > .row"?
<div class="container">
<div class="row">
<div class="span8">...</div>
<div class="span4">...</div>
</div>
</div>
Related
I'm trying to figure out why my changes to the padding and margin properties of the various navbar assets is failing to allow for the menu to resize properly on mobile.
JsFiddle is at https://jsfiddle.net/phobrla/b9zpbejg/
<html>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li>The Burkean<br/>Pentad</li>
<li class="active">Intro <span class="sr-only">(current)</span> </li>
<li>Act</li>
<li>Scene</li>
<li>Agent</li>
<li>Agency</li>
<li>Purpose</li>
<li>Quiz</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</html>
Chande .navbar-inverse by .navbar-default
Regards!
JSFIDDLE
.navbar-outer .navbar-default{
background:red;
}
<div class="navbar-outer">
<nav class="navbar navbar-default">
I am creating a responsive design in bootstrap3.
I want to modify my template design for tabs. And for that I am using a external js file.
For now I am planning to show them in only desktop version. I am not sure how to have same kind of effect in mobile. SO for now just dektop.
When I am integrating with Bootstrap3 responsive its not working.
However with a plain html file without bootstrap code its working fine.
Would anyone be able to help me to achieve this using Bootstrap3?
I have added the code in js fiddle #
http://jsfiddle.net/monicaRegal/do5b3ko3/1/
Thank You
Regards,
Monica Mandal
If you're needing tabs made with Bootstrap to expand to the full width of the page or their container, use the nav-justified class in your markup.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Body Content Here
<br />
<br />
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">The Americas</li>
<li role="presentation">Europe</li>
<li role="presentation">Middle East/Africa</li>
<li role="presentation">Asia/Pacific</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">The Americas content</div>
<div role="tabpanel" class="tab-pane" id="profile">Europe content</div>
<div role="tabpanel" class="tab-pane" id="messages">Middle East/Africa content</div>
<div role="tabpanel" class="tab-pane" id="settings">Asia/Pacific content</div>
</div>
</div>
You can then style your tabs however you need. View the snippet in full page mode to see it properly.
i have downloaded a bootstrap carousel template and everything works fine aside from the controls of the carousel. I can see the controls but nothing happens when i click on the left or right control. Any help would be much appreciated. Here are (what i think are) the relevant lines of code:
thanks for your help !
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Bootstrap 1 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 2 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
here are the script references:
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
I think you misunderstood the documentation. There should be only ONE <div class="carousel-inner">. This is the wrapper for your "items". Change your html between the indicators and the controls like this and you should have more success:
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Bootstrap 1 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 2 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
Also, if you want the carousel to automatically begin cycling on load, you can add: data-ride="carousel"To the outermost div (the one with your id)
EDIT: One other thing I forgot to mention...
If you don't add some content to the item div, you won't see anything, not even your captions. That's because the captions are set to the bottom of the item div. If you just want to test things out without the content, just add the following css to cause the item div to have some height (I also added a background color so the white text will show up better against the white background):
div.item {
height: 500px;
background-color: green;
}
I am using Bootstrap v-3.0.2. And I faced an issue while using pull-right into div col class.
please have a look at following URL.Check both full screen and minimized view.
Bootstrap-3 issue
In Mobile-view both panels are merged. But it should be separate.
Both div panels class has grid axis value 12 (col-xs-12).
If I am try with different value it is working fine.
Is it a bug on bootstrap 3 ?
Use col-sm-push and col-sm-pull instead.
Also, you don't need to use col-md-6 and col-lg-6 if you want 50% width columns on any screens larger than xs...
<div class="container">
<!-- div's are merged.But It should be one after another -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Right Panel</h3>
</div>
<div class="panel-body">
Right Panel content
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Left Panel</h3>
</div>
<div class="panel-body">
Left Panel content
</div>
</div>
</div>
</div>
</div>
Bootply
I'm not sure why you would need to add .pull-right to the columns, but if you add .clearfix to the other column, it should resolve this issue.
I think you might get better results using the .col-xx-pull-x and .col-xx-push-x classes to accomplish the same thing. See the grid documentation "Column Ordering" section for more info on this.
I am using Bootstrap in my MVC 4 application to align,
My page loads inside Kendo panel
Most of the time it works correctly,
but some times the span is not aligned properly when the page loads for the first time, after i manually resize the window the spans align correctly.
Here is what i am trying to achieve(This works well most of the time)
span1 span2
span3 span4
This is what i get
s p a n 1
s p a n 2
s p a n 3
s p a n 4
HTML inside razor
<div class="container-fluid">
<div class="row-fluid">
<div class="span5">
<div class="form-horizontal">
<!-- Form elements removed-->
</div>
</div>
<div class="span5">
<div class="form-horizontal">
<!-- Form elements removed-->
</div>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<div class="form-horizontal">
<!-- Form elements removed-->
</div>
</div>
<div class="span5">
<div class="form-horizontal">
<!-- Form elements removed-->
</div>
</div>
</div>
Additional info
Browser IE 9
Bootstrap version 2