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>
Related
is it possible to make Bootstrap 4 Carousel to play ONLY on hover? Like normally it's a still image, but on mousehover it starts to cycle the carousel and on mouseout it pauses.
slider.html
<div id="carousel-example-generic" class="carousel slide carousel-fade slider slideInUp"
data-ride="carousel">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="tab-section">
<div class="user">
<ul class=" carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active wow slideInUp " data-wow-delay=".1s">
<a href="" class="transition-fast">
<span class="count">01</span>
<span class="text">
Lorem Lopsun
</span>
</a>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=" wow slideInUp"
data-wow-delay=".2s">
<a href="" class="transition-fast">
<span class="count">02</span>
<span class="text">
Lorem Lopsun
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-5 col-md-6 wow slideInRight" data-wow-delay="1s">
<div class="carousel-inner wow slideInUp" data-wow-delay="2s" role="listbox">
<div class="item active">
<img src="assets/img/first-01.png" alt="">
</div>
<div class="item">
<img src="assets/img/first-02.png" alt="">
</div>
</div>
</div>
</div>
</div>
script.js
$('#carousel-example-generic').hover(function(){
$("#carousel-example-generic").carousel('cycle');
},function(){
$("#carousel-example-generic").carousel('pause');
});
First disable the default behaviour of the carousel to stop on hover by putting setting the data-pause to false
id="carousel-example-generic" class="carousel slide carousel-fade slider slideInUp" data-pause="false"
Use the following js to manage the hover behaviour
$('.carousel').carousel({
interval: 2000
})
$('.carousel').carousel('pause') ;
$('.carousel').hover(function(){
$('.carousel').carousel('cycle') ;
}) ;
$('.carousel').mouseleave(function(){
$('.carousel').carousel('pause') ;
});
I have a sidebar which is col-md-2. now I need to put 4 thumbnail next to each other on this sidebar that picture of them would be responsive. whith this code image become bigger when I resize the window (make window smaller)
<div class=col-md-2>
<div class=row>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div><!--end of row>
<div>
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 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>
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.