this is my code :
#for (int j = 0; j < 10; j++)
{
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="">
<h3>Feature Label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
Buy Now! More Info
</p>
</div>
</div>
</div>
}
how can i reduce the margin between each item ( check attachment please)
thanks
.col-lg-2.col-md-3.col-sm-4.col-xs-12
{
padding: 0 your desired padding/2;
}
actually, it is padding. not margin.
here is the bootply example:- http://www.bootply.com/4yqAuLl9tM
Related
I want to make an adaptive page with CSS grid like this for PC:
IMG | Text
Text | IMG
IMG | Text
And like this for mobile:
IMG
Text
IMG
Text
IMG
Text
The problem is I can not wrap each pair Text IMG to a div.
How can I make such layout with that chess order and without it for mobile?
img {
max-width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
#media screen (max-width: 540px) {
.grid {
grid-template-columns: 1fr;
}
}
<div class="grid">
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
</div>
You can adjust the placement using grid-column:
img {
max-width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow:dense; /* Don't forget this to fill all the tracks */
}
/* you pattern repeat each 4 elements */
.img:nth-child(4n + 2) {
grid-column:1;
}
.info:nth-child(4n + 1) {
grid-column:2;
}
/**/
#media screen and (max-width: 540px) {
.grid {
grid-template-columns: 1fr;
}
.info:nth-child(4n + 1) {
grid-column:1;
}
}
<div class="grid">
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
</div>
I'm having trouble obtaining equal height bootstrap cards with differing length body content with a slick carousel. I've looked at similar answers on here and none of them appear to work in my scenario.
I've managed get equal height slides but for some reason I cannot get the cards within the slides to be 100% height of the slide (parent container). I'm trying to achieve what the Bootstrap class 'card-deck' achieves but in a carousel.
HTML
<div class="container">
<div class="row">
<div class="col-10 mx-auto s_container">
<div class="slider">
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates, rem?</div>
<div class="card-footer">
More Info
</div>
</div>
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, quasi soluta dolorum pariatur hic porro.</div>
<div class="card-footer">
More Info
</div>
</div>
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto magnam esse molestiae est. Nisi aliquam libero dolorem? Qui, enim nam.</div>
<div class="card-footer">
More Info
</div>
</div>
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates, rem?</div>
<div class="card-footer">
More Info
</div>
</div>
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, quasi soluta dolorum pariatur hic porro.</div>
<div class="card-footer">
More Info
</div>
</div>
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto magnam esse molestiae est. Nisi aliquam libero dolorem? Qui, enim nam.</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.s_container{
margin: 0 auto;
padding: 0 40px 0 40px;
width: 100%;
}
.slider{
border: 2px solid red;
}
.slick-track {
display: flex !important;
}
.slick-slide{
margin: 12px;
height: auto;
border: 2px solid green;
}
.slick-frame {
visibility: hidden;
}
An example of running can be found here:
Example
Equal height has been a problem for a lot of developers over the years.
In my opinion you can choose between 2 different solutions:
Javascript solution
You loop over all the cards and save the biggest height. Set all cards to this height with JS after biggest one has been defined.
https://www.bootply.com/LnwZjxWe7L
// Get cards
var cards = $('.card-body');
var maxHeight = 0;
// Loop all cards and check height, if bigger than max then save it
for (var i = 0; i < cards.length; i++) {
if (maxHeight < $(cards[i]).outerHeight()) {
maxHeight = $(cards[i]).outerHeight();
}
}
// Set ALL card bodies to this height
for (var i = 0; i < cards.length; i++) {
$(cards[i]).height(maxHeight);
}
CSS only solution
This one is a bit more complex to explain so here is an example how to do it:
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
<div id="container3"> <!-- added -->
<div id="container2"> <!-- added -->
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Super long text! Wow looks at this text, it is so long it needs to break on multiple lines!</div>
</div>
</div> <!-- added -->
</div> <!-- added -->
I got this solution from here:
https://matthewjamestaylor.com/equal-height-columns
Im using bootstrap 4.0.0-beta.2 and I have a css problem.
I want following layout
This is the html:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div id="task" class="container">
<div class="row">
<div class="col-12">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12">
<div class="card card-shadow" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint></app-paint>
</div>
</div>
</div>
</div>
</div>
And what im trying to create is a layout of cards.
I want the first card to stay within the col-12 width and adapt the hight after content. And then I want the second div to always end at bottom of page. No margin between. So I tried to add position:fixed, bottom:0 and height:100% but then the width get wierd and it cant handle resize of the page. So How can I force the second div to end at page bottom?
You may use height and margins.
Boostrap class: .h-100 sets height:100% , but parent need an height where % can be calculated from (css added for html & body)
margin-top:auto and bottom 0 will send the second element at the bottom. boostrp classes used : mt-auto mb-0
html,
body {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container h-100"><!-- class added -->
<div class="row h-100"><!-- class added -->
<div class="col-12">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 mb-0 mt-auto"><!-- class added -->
<div class="card card-shadow" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint>app-paint</app-paint>
</div>
</div>
</div>
</div>
</div>
or do you need the second div to expand ?
html,
body {
height: 100%;
}
.custom-flex {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container flex-column h-100">
<!-- class added -->
<div class="d-flex flex-column h-100">
<div class="">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="d-flex flex-column custom-flex">
<div class="card card-shadow custom-flex" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint>app-paint</app-paint>
</div>
</div>
</div>
</div>
</div>
I think the answer of this question would be to change the css of the card. If you are looking for to increase or decrease the space between the cards from top or from bottom you should change the css like so:
In your case for card shadow it would be
.d-flex [class*='card-shadow'] {
margin-top: 2.5em;
margin-bottm: 2.5em;
}
Use your own unit for css calculation em, px or whatever suit you.
I am trying to create a layout using Flexbox where I have elements which consist of 3 other internal elements. The parent item element contains 3 divs: image, button, text. The issue is that my items will not always contain images or text that is the same height as the others. The button is the one thing that will have a consistent height. I am trying to figure out if it's possible to have each of my image divs be the same height as the tallest one and same for the text divs. I would also like the images to be vertically aligned to the bottom, so if one element has a shorter image, the white space to make the element the same height will go above the image like this:
And here is what I have so far:
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I know that I could do this using Javascript to loop through each item to get the tallest and change the CSS of all others, but I'd like to use only CSS if possible. I also know that I could just set the height of the image container to the height of the tallest image, but these images are going to be dynamic and there are going to be a lot of them, so I'd rather have a solution that doesn't require hardcoding values.
Flexing the .item class and adding justify-content: flex-end; would provide the majority of the affect, but as far as I know you'd have to set a specific height on at least one of the items if you want two elements to be aligned the same across flexbox. Happy to be proven wrong though.
You could alternatively use margin-top: auto on the first child to push any unused space to the top and everything else down.
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.text {
height: 36px; /* magic number */
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I have a div where is a carousel - separately with text and images. Everything works (almost perfect) :) But I want have a background carousel with images in this set. I have sth like that:
jsfiddle
<div id="background">
<div class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
</div>
<div id="slider" class="carousel slide col-xs-9 padd-lt0" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img alt="First slide"4 src="http://placehold.it/1200x440/999999/cccccc" >
</div>
<div class="item">
<img alt="Second slide" src="http://placehold.it/1200x440/cccccc/ffffff">
</div>
<div class="item">
<img alt="Third slide" src="http://placehold.it/1200x440/dddddd/333333">
</div>
</div>
</div>
<div id="slider_captions" class="col-xs-3 ">
<div>
<div id="caption-0" class="carousel-caption">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
<div id="caption-1" class="carousel-caption">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
<div id="caption-2" class="carousel-caption">
<h2>Title 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
</div>
</div>
When I try put this example to other div (div .row) i don't see any background. I tired z-index and background-color: transparent - but nothing was happen.
How to convert the example above (background slider) so that it works only in a specific div (not the entire browser window)