I have some div panels, and after each one there is a gap on the left, when the column on the right is bigger than the last.
How can I make it come under each one (like pinterest)
JSFiddle Example
<div class="row">
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>First Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Second Cell</h4>
<h4>Second Cell</h4>
<h4>Second Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
</div>
You can make it (like Pinterest) in another way like this:
JsFiddle DEMO
*, *:before, *:after {box-sizing: border-box !important;}
.row {
-moz-column-width: 18em;
-webkit-column-width: 18em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
}
.item {
display: inline-block;
padding: .25rem;
width: 100%;
}
.well {
position:relative;
display: block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="item">
<div class="well">
<h4>First Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>Second Cell</h4>
<h4>Second Cell</h4>
<h4>Second Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laudantium veritatis expedita optio aperiam modi, odit eius
</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</h4>
</div>
</div>
</div>
</div>
Related
Using Bootstrap 4 Grid system, I have the following structure:
https://i.imgur.com/Qa0xXAk.png
I have the content column and two blank columns inside each row.
Sometimes I need to apply CSS style to the whole row.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
Lorem ipsum
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
dolor sit amet,
</div>
<div class="col-sm-3"></div>
</div>
....
<div class="row custom-background-color">
<div class="col-sm-3"></div>
<div class="col-sm-6">
consecteur adipiscing elit,
</div>
<div class="col-sm-3"></div>
</div>
</div>
But in the same time it becomes not handy to have multiple duplicate code. I want to regroup the code, to have column definition only once.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="row">Lorem ipsum</div>
<div class="row">dolor sit amet,</div>
...
<div class="row custom-background-color">consecteur adipiscing elit,</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
I expect to have the CSS style not for one column, but for the whole page width.
Is it possible to make a workaround or find solution to solve the problem?
Yes it is possible if you have the same amount of rows in each column.
Then, you can use the nth-child selector to pass styles to e.G. the fifth row in each column.
div[class^="col"] .row:nth-child(2) {
background: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row">ipsum</div>
<div class="row"> amet,</div>
<div class="row"> elit,</div>
</div>
<div class="col-sm-6">
<div class="row">Lorem ipsum</div>
<div class="row">dolor sit amet,</div>
<div class="row">consecteur adipiscing elit,</div>
</div>
<div class="col-sm-3">
<div class="row">Lorem ipsum</div>
<div class="row">dolor</div>
<div class="row">consecteur</div></div>
</div>
</div>
I have a bit trouble with using row.
I have this:
<div class="row">
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-8 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
But I get every Lorem ipsum under each other, not beside. How can I resolve this?
I suspect you might have been using mark-up suitable for either the legacy 'float' or 'flex' grid system whilst Foundation 6's default enabled is 'XY grid'. Thus, the mark-up is different and would cause your columns to stack.
Float/flex grid mark-up
<div class="row">
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-8 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
You can continue to to use 'float' or 'flex' grids but need to specify which you're using in the project. Or, if you want to use the newer 'XY grid', you can modify your mark-up like so.
XY grid mark-up
<div class="grid-x grid-margin-x">
<div class="cell large-2 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="cell large-8 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="cell large-2 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
I'm working on amending a HTML5 template. The default setup of the Bootstrap parameters were:
col-sm-12 col-md-4 col-lg-4
col-sm-12 col-md-8 col-lg-8
This meant that the latin text took up 20% of screen width and pics 80%, but I want it the other way round... Text taking up 80% width, photo 20%.
Can someone please advise what the bootstrap parameters need to be for this for responsive to work? I've tried loads of options but can't get it right!
Is this possible or do I need to revise CSS?
Thanks
Full code below:
<section id="ourteam" class="wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4">
<h2>Meet our Team</h2>
<div class="ourteamd">
<p>Lorem ipsum dolor sit eros. Pellentesque nec vulpe eros.</p>
</div>
</div>
<div class="col-sm-12 col-md-8 col-lg-8">
<div class="responsive">
<div>
<div class="third-effect">
<img src="http://www.placehold.it/384x444" class="img-responsive" alt="Our Team">
<div class="mask">
Facebook
Twitter
</div>
</div>
Just switch the size value of both columns, 4 becomes 8, and 8 becomes 4.
Try with below code.
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-8">
<h2>Meet our Team</h2>
<div class="ourteamd">
<p>Lorem ipsum dolor sit eros. Pellentesque nec vulpe eros.</p>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="responsive">
<div class="third-effect">
<img src="http://www.placehold.it/384x444" class="img-responsive" alt="Our Team">
<div class="mask">
Facebook
Twitter
</div>
</div>
</div>
</div>
I've made a bootstrap carousel with items each containing three columns.
As the slide transition ends, the items snap into place and very briefly change the height of the parent div.
I've spent all day trying to find a solution but can't see anything! I'm assuming it is something to do with padding/margins as the slide happens. I've tried forcing the items to have no padding or margins but no luck.
Does anyone know anything about this issue? Is there something obvious I'm missing?
The link to the page with the issue is here
And the code itself:
.tourenEvents {
background: #2a2a2a;
}
.tourenEvents .tourenEventsInner {
padding-top: 30px;
padding-bottom: 50px;
color: #fff;
}
.tourenEvents .tourenEventsInner .carousel .item .carouselBlock {
margin: 0 !important; /* This was one of the attempts to fix the issue */
}
.tourenEvents .tourenEventsInner .carousel .item .carouselBlock img {
width: 100%;
}
/* == Carousel Control styles - I don't think the issue comes from here but I'm posting it just incase == */
#tourenCarousel .carousel-indicators {
display: none;
}
#tourenCarousel .carousel-control {
background-image: none !important;
color: #fff;
font-size: 50px;
top: 15vh;
opacity: 1;
-webkit-text-stroke: 2px #2a2a2a;
text-shadow: none;
}
#media (max-width: 768px) {
#tourenCarousel .carousel-control {
padding-top: 10vh;
}
}
#tourenCarousel .carousel-control:hover {
color: #fff;
}
#tourenCarousel .carousel-control:focus {
color: #fff;
}
#tourenCarousel .left {
padding-right: 15px;
}
#tourenCarousel .right {
padding-left: 15px;
}
<div class="tourenEvents col-sm-12">
<div class="tourenEventsInner col-lg-12 col-md-offset-1 col-md-10 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 text-center">
<h3 class="text-center">Check out our events</h3>
<!-- div:tourenCarousel is the carousel of events -->
<div id="tourenCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#tourenCarousel" data-slide-to="0" class="active"></li>
<li data-target="#tourenCarousel" data-slide-to="1"></li>
<li data-target="#tourenCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-10 col-xs-offset-1">
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-10 col-xs-offset-1">
<div class="carouselBlock col-lg-4col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-10 col-xs-offset-1">
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#tourenCarousel" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#tourenCarousel" role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Remove width:100% on .tourenEvents .tourenEventsInner .carousel .item .carouselBlock img
you are resizing width on active class.
I'm trying to re-create this panel:
I just wondered if anyone knows how I can go about this , I have my html markup done. But I have no idea how I would begin to style it..
My example html:
<div id="mainContainer" class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 01</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" />
</div>
</div>
</div>
</div>
Check this out this will help you....
.my_panel > .panel-body {
padding: 0px;
}
.my_panel > .panel-body > img {
width: 100%;
height: 100%;
}
.my_panel > .panel-footer {
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="mainContainer" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default my_panel">
<div class="panel-body">
<img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" />
</div>
<div class="panel-footer">
<h3>The company</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, voluptas, sunt vitae mollitia iure perferendis rerum odio! Natus, cupiditate, est, quas, non perspiciatis in quo possimus eos voluptas tempore maxime.</p>
Read More
</div>
</div>
</div>
</div>
</div>
</div>
</div>