Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. asdfasdfasdfasdfasdfasdfa asdf asdf asdf asdf asdf asdf sdfasd fasdf asdfa sdfas dfasd fasdfasdfasdfsdf asdf asdfasdfasdfasdfa sfa sdfa sdf asd f
$21.000Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
$21.000Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
$21.000Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
$21.000Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
$21.000Product title
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
$21.000
Bootstrap Flexbox List/Grid Toggle
https://codepen.io/bootstrapped/pen/RRBdbm
.list-grid-demo .glyphicon {
margin-right: 5px;
}
@media only screen and (min-width: 481px) {
.grid-group-wrapper.row {
display: flex;
flex-wrap: wrap;
}
.grid-group-wrapper.row:after,
.grid-group-wrapper.row:before {
display: flex;
}
.grid-group-wrapper.row {
> [class*='col-'] {
display: flex;
flex-direction: column;
}
.thumbnail,
.caption {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.caption-text {
flex-grow: 1;
}
img {
width: 100%;
height: auto;
}
.price-buy-spacing {
display: flex;
justify-content: space-between;
}
.price-buy-spacing .lead {
margin-bottom: 0px;
}
.price-buy-spacing {
margin-bottom: 10px;
}
}
.list-group-wrapper {
.item {
float: none;
width: 100%;
}
.item:before,
.item:after {
display: table;
content: " ";
}
.item:after {
clear: both;
}
.item {
.thumbnail img {
margin-right: 10px;
float: left;
}
.caption,
.thumbnail {
display: flex;
}
.caption {
flex-direction: column;
}
.caption-text {
flex-grow: 1;
}
}
}
}
jQuery(document).ready(function($) {
$('#list').click(function(event) {
event.preventDefault();
$('#products').addClass('list-group-wrapper').removeClass('grid-group-wrapper');
});
$('#grid').click(function(event) {
event.preventDefault();
$('#products').removeClass('list-group-wrapper').addClass('grid-group-wrapper');
});
});
Subscribe to:
Post Comments (Atom)
What is Security Engineering? Part 2.
A broad overview of the ever-developing security engineering field; a domain that can feel intimidating to some software engineers. With Nie...
No comments:
Post a Comment