<div class="row">
<div class="span4">
<h2>Cele mai vandute</h2>
</div>
<div class="span10 offset1 well">
<ul class="thumbnails">
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
</ul>
</div>
</div>
Hello i'm having trouble in bootstrap css to center this span in a container class.
Can someone explain to me how centering in bootstrap works specially for spans. thank you very much
You have it explained in bootstrap site.
Normally, your spans may sum 12 (until you customize it).
Also you are using <li> elements instead of <div>, which is the element that bootstrap uses for the grid
Some adjusts for your code:
<div class="row">
<div class="span2">
<h2>Cele mai vandute</h2>
</div>
<div class="span10">
<div class="row">
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
</div>
</div>
</div>
i used ul and li instead of div's because on bootstrap website on examples it shows with ul and li.. not with div's
per one row i can have a total of 12 and after that i need to work on another row again with a max of 12? like this:
<div class="row">
<span class="9">...</div>
<span class="3">...</div>
</div>
<div class="row">
<span class="9">...</div>
<span class="3">...</div>
Related
I'm trying to stack these picture vertically on a small screen. So one
column instead of two
I'm trying to stack these picture vertically on a small screen. So one
column instead of two:
Here is my code:
<div class="container">
<div class="row g-0">
<div class="col-6 col-ms-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skylit.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skit4.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-6 xl-col">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skit6.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skylit2.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/lvr.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/gym.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>
Here is what I tried so far:
/* Please improve your content by showing what you tried so far */
e. G. Added "some" to "thing", Edited column count, I'm not that into HTML but you get what you could write here
If using bootstrap the classes should be col-sm-12, I see you are using sm-col-12 and col-ms-12. That should make the element take all space in grid.
https://getbootstrap.com/docs/4.0/layout/grid/
Start from smallest class too: class="col-12 col-sm-12 col-md-6"
I want to achieve a layout like this:
But its not working properly, Im getting this: http://jsfiddle.net/9cfqjmkb/. The title should be aligned with the top of the image but its not working. Do you know why?
Also I want some margin between the image and the other div with the title and post date, as it is in the image above, but the margin is not working. Do you know why?
HTML
<div class="container">
<div class="row">
<div class="col-3">
<div class="bg-custom-light2 p-0">
<h2 class="font-weight-bold text-custom-blue-dark h5 border-color p-2">Title</h2>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="font-weight-bold text-custom-blue-dark">Test title example for
example test post</h6>
<p>post date date</p>
</div>
<img class="ml-2" src="https://via.placeholder.com/50" alt="">
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="font-weight-bold text-custom-blue-dark">Test title example for
example test post</h6>
<p>post date date</p>
</div>
<img class="ml-2" src="https://via.placeholder.com/50" alt="">
</li>
</ul>
</div>
</div>
</div>
</div>
?
.list-group {
width:300px;
}
.ml-2 {
align-self:flex-start;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-3">
<div class="bg-custom-light2 p-0">
<h2 class="font-weight-bold text-custom-blue-dark h5 border-color p-2">Title</h2>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="font-weight-bold text-custom-blue-dark">Test title example for
example test post</h6>
<p>post date date</p>
</div>
<img class="ml-2" src="https://via.placeholder.com/50" alt="">
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="font-weight-bold text-custom-blue-dark">Test title example for
example test post</h6>
<p>post date date</p>
</div>
<img class="ml-2" src="https://via.placeholder.com/50" alt="">
</li>
</ul>
</div>
</div>
</div>
</div>
I'm having a hard time targetting the second <img> tag to apply a .css rule to it but it's not working:
This is my code:
.product-highlights img:nth-of-type(2) {
margin: 0 4px;
}
<div class="product-highlights">
<div class="grid-container full">
<div class="grid-x">
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
</div>
</div>
</div>
What am I doing wrong?
As I noted in my comment above, nth-of-type only looks at siblings, so in your case target the image's parent divs instead:
.product-highlights .cell:nth-of-type(2) img{
margin: 0 4px;
}
<div class="product-highlights">
<div class="grid-container full">
<div class="grid-x">
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
</div>
</div>
</div>
pick secound div that holding image and then apply css to that image
.product-highlights .cell:nth-child(2) img{
margin: 0 4px;
}
<div class="product-highlights">
<div class="grid-container full">
<div class="grid-x">
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
</div>
</div>
</div>
I want to create a grid of responsive images that are always squared in Bootstrap.
So far I got this: Jsfiddle Link
This part forces the elements to be squared all the time:
.frontpage_square {
position:relative;
overflow:hidden;
padding-bottom:100%;
}
.frontpage_square img {
position:absolute;
}
The bigger square on the left and the nine smaller ones on the right are correct, but I can't figure out how I can spread the nine squares on the right over the full height. So basically they should take the whole height of the left, bigger square.
It is simple, you aren't arranging your divs properly. Make use of bootstrap by using the divs properly. Once that is done, you can make the column all same size by using this S.O. question.
jsfiddle
<div class="row">
<div class="col-sm-6 panel">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-6 panel">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4 ">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4 ">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
</div>
I am using twitter bootstrap and the 'media-grid' feature to display some thumnabils of images. Here is what it looks like right now: http://jsfiddle.net/vXMMA/
What I would like to do is add a caption to these thumbnails.. can someone offer some idea on what changes to CSS I would need to make to enable this.
The latest bootstrap comes with a .caption class that you can add to your thumbnail grid, you can place it above or below your media grid quite easily and it works like so:
<ul class="thumbnails">
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
</ul>
<hr>
<ul class="thumbnails">
<li class="span4">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span4">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
</ul>
You can center the caption inside the image container by just modifying the .caption class and adding the text-align: center property, like so:
.caption {
text-align:center;
}
Demo: http://jsfiddle.net/2BBnR/
Note Noticed this post is old, so the other method posted is irrelevant with the latest bootstrap, the .media-grid class is no longer used.
HTML
<li>
<a href="#">
<legend >Caption</legend>
<img class="thumbnail" src="http://placehold.it/140x90" alt="">
</a>
</li>
CSS
legend { margin:3px; text-align:center;width:100%}
Working DEMO
Just use the <legend> tag before or after each image, and add the text-align:center style to the image grid.
See this demo, it works great.