I wanted my panel heading to contain some text and a button, the former being left-aligned and the latter, right-aligned. But as soon as I apply the class row to my panel header, it breaks out of the parent div and takes up what I believe to be the container width.
Here's the code I'm using:
<div class="panel panel-primary">
<div class="panel-heading row">
<h4 class="col-md-11">Manage Your Subscriptions</h4>
<div>
<a href="#" class="btn btn-default col-md-1" >Log out</a>
</div>
</div>
<div class="panel-body">
</div>
</div>
And here's the result:
How can I correct this?
It seems to me like you just need to move the "row" to be inside the "panel-heading" rather than on the same level, as they both have relative CSS positioning properties. I tried the following code:
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<h4 class="col-md-11">Manage Your Subscriptions</h4>
<div class="col-md-1">
<a href="#" class="btn btn-default" >Log out</a>
</div>
</div>
</div>
<div class="panel-body">
Stackoverflow rocks!
</div>
</div>
and it gave me this output (which is what you're looking for, I hope):
I hope that helps
EDIT: I tried using "pull-right" as others have suggested and it seems to create more troubles as it messes the top/bottom margins as well since it makes the display block relative to container (Which I would generally recommend against doing, even if it works for you).
EDIT2: moved the "col-md-1" class into an encapsulating "div" to solve the button's margins' issue.
May be you need something like following?
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-10 col-sm-10">
<h4>Manage Your Subscriptions</h4>
</div>
<div class="col-md-2 col-sm-2">
<a href="#" class="btn btn-default pull-right" >Log out</a>
</div>
</div>
</div>
<div class="panel-body">
</div>
</div>
Let me know if it works
You can use pull-left and pull-right instead of grid system, so the components will be rendered on single line even on small screen (if there is enough space):
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="pull-left">Manage Your Subscriptions</h4>
<span class="pull-right">
<a href="#" class="btn btn-default" >Log out</a>
</span>
<div class="clearfix"> </div>
</div>
<div class="panel-body">
</div>
</div>
Related
I made my website menu like this:
<div class="container-fluid">
<div class="row">
<nav id="menu">
<div class="col-sm-12 col-md-2 active-link">
<div class="vertical-align" >
<img class="img-responsive" src="img/logo.png" alt="logo">
</div>
</div>
<div class="col-sm-3 col-md-2 nonactive-link">
<div class="vertical-align" >
MENU<br>ONE
</div>
</div>
<div class="col-sm-3 col-md-2 nonactive-link">
<div class="vertical-align" >
MENU<br>TWO
</div>
</div>
<div class="col-sm-2 col-md-2 nonactive-link">
<div class="vertical-align" >
MENU THREE
</div>
</div>
<div class="col-sm-2 col-md-2 nonactive-link">
<div class="vertical-align" >
MENU FOUR
</div>
</div>
<div class="col-sm-2 col-md-2 nonactive-link">
<div class="vertical-align" >
MENU FIVE
</div>
</div>
</nav>
</div>
</div>
Im not using original nav from bootstrap that is a list (ul li ..)
is there a way i can achive the toggle menu using just divs with col-xs-12 ?
How can i put my code to achieve that just using divs whit col's?
Thanks a lot :)
In order to actually make it a nav menu you need some bootstrap utility classes on the most parent nav element <nav class="navbar navbar-default"> and then you need to add the menu "three lines" icon HTML
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>
Then you need to add some more utility classes and ID to the wrapper of the actual nav links <div class="collapse navbar-collapse" id="navbar-collapse"> with making sure the id matches the data-target in the nav button itself.
The bootstrap doc on this is HERE
Also I made a JSFIDDLE with your original HTML and modified it, let me know if that makes sense.
I am creating a gallery with albums in Bootstrap 3.3.6. The albums consist of an album cover which reveals or hides the album pics inside a collapsible <div>. Collapsible <div> is also accordion style.
I have 2 layouts for mobile and desktop using media queries and Bootstrap's .hidden-* class. Also, when you click on one of the pics within the album it opens a carousel to scroll through the images.
The code works perfectly, but I would like the collapsible <div> to remain open though the layout changes as the page resizes. Right now it opens on click and then when you resize the screen down past the break point it closes as the layout changes with the breakpoint.
I realize this is a bit unnecessary because basically no one is going to resize their browser this way on a desktop, but I still want to know how to do it. Can't figure it out.
here is a sample of the code, you can see how the layout changes from desktop to mobile.
See it in action here www.leubasketball.com/gallery
<div class="panel-group text-center" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="col-sm-12 col-md-12 hidden-xs">
<!--Desktop Gallery------------------------------>
<!--Album Covers--------------------------------->
<!--Skillcase 2016 Album Cover----------------------->
<div class="col-sm-3 panel-heading" role="tab" id="skillcase2016">
<div class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSkillcase2016" aria-expanded="true" aria-controls="collapseSkillcase2016">
<h4 style="color:#ffffff">Skillcase 2016</h4>
<img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
</a>
</div>
</div>
<!--St Goerge 2016 Album Cover----------------------->
<div class="col-sm-3 panel-heading" role="tab" id="stgeorge2016">
<div class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseStgeorge2016" aria-expanded="false" aria-controls="collapseStgeorge2016">
<h4 style="color:#ffffff">St. George 2016</h4>
<img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
</a>
</div>
</div>
</div>
<!--Albums-------------------------------------------->
<!--Skillcase 2016 Album--------------------------->
<div id="collapseSkillcase2016" class="panel-collapse collapse" role="tabpanel" aria-labelledby="skillcase2016">
<div class="panel-body">
<!--Thumbnails-------->
<div class="col-sm-12 col-md-12 hidden-xs">
<!--Carousel Modal here-------------------------------------->
</div>
</div>
</div>
<!--Skillcase 2016 Album--------------------------->
<div id="collapseStgeorge2016" class="panel-collapse collapse" role="tabpanel" aria-labelledby="stgeorge2016">
<div class="panel-body">
<!--Thumbnails-------->
<div class="col-sm-12 col-md-12 hidden-xs">
<!--Carousel Modal here-------------------------------------->
</div>
</div>
</div>
<!--Mobile Gallery---------------------------------------->
<!--Mobile Album Covers-------------------------------->
<!--Skillcase 2016 Album Cover---------------------->
<div class="col-xs-6 visible-xs panel-heading" role="tab" id="skillcase2016M">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSkillcase2016M" aria-expanded="false" aria-controls="collapseSkillcase2016M, collapseSkillcase2016">
<h4 style="color:#ffffff">Skillcase 2016</h4>
<img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
</a>
</h4>
</div>
<!--St. George 2016 Album Cover------------------->
<div class="col-xs-6 visible-xs panel-heading" role="tab" id="stgeorge2016M">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseStgeorge2016M" aria-expanded="false" aria-controls="collapseStgeorge2016M">
<h4 style="color:#ffffff">St. George 2016</h4>
<img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
</a>
</h4>
</div>
<!--Mobile Albums--------------------------------------->
<!--Skillcase 2016 Album---------------------------->
<div id="collapseSkillcase2016M" class="panel-collapse collapse" role="tabpanel" aria-labelledby="skillcase2016M">
<div class="panel-body">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
<!--Carousel Modal here------------------------->
</div>
</div>
</div>
<!--St George 2016 Album---------------------------->
<div id="collapseStgeorge2016M" class="panel-collapse collapse" role="tabpanel" aria-labelledby="stgeorge2016M">
<div class="panel-body">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
<!--Carousel Modal here------------------------->
</div>
</div>
</div>
</div>
</div>
I have a problem at aligning columns inside rows in bootstrap. I have the following structure:
<section class="container-fluid centerP">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-10 col-xs-offset-1">
<h1></h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
</section>
It should look like a 1-2-2-1 (vertically aligned boxes of cntent). Currently they are centered but too far apart because of the overset of 2. I found a solution that mentioned using classes of "row-centered" and "col-centered" and it worked untill i modified the classes to "col-xs" and "col-lg". So what i was trying to do for the last two days was to bring them closer together but with no success.
I started coding a couple of weeks ago so please bear with me if the question is stupid
Each row should split to 12 col.
for exemple:
<div class="row">
<div class=col-md-6>
something
</div>
<div class=col-md-6>
something
</div>
</div>
A few suggestions:
I think you mean to use <div class="container-fluid centerP"> rather than <section class="container-fluid centerP>. Check out What is the difference between <section> and <div>? for more on why you should probably use a div rather than a section here.
A simple 1-2-2-1 block of vertically aligned central columns could be written like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 id="headerBox">Dolloping doubloons!</h1>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="footerText">Dolloping doubloons!</h3>
</div>
</div>
`
You can then use the ids and classes to set the text's padding and margin properties in CSS, which in turn will offer you more precise control over where the text displays. For example, if you wanted to centre the text within its respective box, you could use margin: 0 auto;.
I am using Bootstrap 3. I have one row that will hold a variable amount of columns, ranging from 1-let's say 9.
The are currently set to col-lg-4, so three should display on one row. I would normally create a new row, but since I am dynamically adding columns, I cannot do this, or at least do no know how.
When my client adds a post, it automatically creates a column with content.
The problem lies only in Firefox & IE, in both desktop and mobile views. The 4th item (or 1st item that should go to the next row) gets pushed to a new line and is offset. See screenshot below.
I am using ExpressionEngine as my CMS.
It displays perfectly in Chrome.
Code Below
<div class="container">
<div class="row">
{exp:channel:entries channel="plans" orderby="title" sort="asc"}
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 centered">
<div class="grid mask">
<figure>
<img class="img-responsive" src="{plan_main_image}">
<figcaption>
<h5>{title}</h5>
<a data-toggle="modal" href="#{url_title}" class="btn btn-primary btn-lg">View Floor Plan</a>
</figcaption>
</figure>
</div>
</div>
<div class="modal fade" id="{url_title}" tabindex="-1" role="dialog" aria-labelledby="{url_title}" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{title}</h4>
</div>
<div class="modal-body text-left">
<div class="row">
<div class='list-group gallery'>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_main_image}">
<img class="img-responsive" alt="" src="{plan_main_image}" />
</a>
</div>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_first_level}">
<img class="img-responsive" alt="" src="{plan_first_level}" />
</a>
</div>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_second_level}">
<img class="img-responsive" alt="" src="{plan_second_level}" />
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
{plan_description}
</div>
</div>
<!--<div class="row">
<div class="col-lg-12">
<b>Download the floor plan</b>
</div>
</div>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{/exp:channel:entries}
</div><!-- /row -->
<br>
<br>
</div><!-- /row -->
</div><!-- /container -->
Thanks
The reason for this is because the first image is slightly taller than the other images. You need to use a responsive column reset for this. See Responsive Column Resets in the doc.
The basic concept is to add a div after the each horizontal grouping that contains a clearfix so that the next horizontal grouping is cleared before and aligns correctly.
For more complex scenarios you can see my answer here: Gap in Bootstrap stacked rows.
I'm trying to make such layout:
How can I achieve it using Bootstrap 3?
Have tried the following code, but it doesn't work:
<div class="container">
<div class="well">
<div class="col-md-3 text-center"><button class="btn btn-default">Previous</button></div>
<div class="col-md-6 text-center">title</div>
<div class="col-md-3 text-center"><button class="btn btn-default">Next</button></div>
</div>
</div>
you must use class .pull-right and .pull-left with your code, and as an example:
<button class="btn btn-default pull-left">Previous</button>
<button class="btn btn-default pull-right">Next</button>
hope this give you the idea and work for you.
It should work if you wrap the cols inside a row..
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-3 text-center"><button class="btn btn-default">Previous</button></div>
<div class="col-md-6 text-center">title</div>
<div class="col-md-3 text-center"><button class="btn btn-default">Next</button></div>
</div>
</div>
</div>
Demo http://bootply.com/105224
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.Predefined grid classes like .row and .col-md-4 are available for quickly making grid layouts.
<div class="titleBar">
<div class="row">
<div class="col-md-3"><button class="btn btn-primary">Button 1</button></div>
<div class="col-md-6 text-center">Title Text</div>
<div class="col-md-3 "><button class="btn btn-primary">Button 2</button></div>
</div>
</div>
Hope this would be helpful.Also check this http://getbootstrap.com/css/#grid for more details about responsive grid layout.