Can any one please provide me the responsive html/CSS for this kind of book shelf.
Dodgy image link removed
I tried to find same kind of shelfs online, but they not kind/not responsive
thats view more/less button.
really appreciated,
Can any one please provide me the responsive html/CSS for this kind of book shelf.
Dodgy image link removed
I tried to find same kind of shelfs online, but they not kind/not responsive
thats view more/less button.
really appreciated,
Here's a concept for you:
HTML:
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-12 shelf hidden-md hidden-lg"></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-12 shelf"></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-12 shelf hidden-md hidden-lg"></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
<div class="col-xs-12 shelf"></div>
</div>
</div>
CSS:
.book {
padding: 15px 0 0 0;
margin: auto;
}
.shelf {
border-bottom: 30px solid #A1A194;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
top: -15px;
z-index: -1;
}
HOW IT WORKS:
Okay, so you want to have 6 books on the shelf when the viewport is at the md
size and above and below that you want to have 3 books on the shelf.
So, first wrap all of your books inside a single row because you want them to fluidly go between your different viewport sizes. Each of the books will be wrapped in a div with the column classes: col-xs-4
(12/4=3) and col-md-2
(12/2=6).
Next, you'll need to add a div for your shelves. You have a pretty simple 6-3 design so, add a div with the class shelf after every group of three columns and give it a class name of shelf. The shelf needs to have float
set to left
to put it in the flow of the rest of the column divs and it needs a width to 100%. So, we'll add the col-xs-12
class to the shelf
div as well. This will ensure that the shelf spans the entire container regardless of the size of the viewport (i.e., from xs and up).
Since you want six books on the shelf at the larger viewport sizes, you'll have to hide every other shelf on the md
and lg
viewports. You can use the built in responsive utility classes in Bootstrap to do this. Adding the classes hidden-md
and hidden-lg
to the first and third shelf
divs.
For each of the book
images on the shelf, you'll want to give them the img-responsive class. That will make the books scale with the viewport, but never get larger than 100% of the image's actual dimensions. You'll also want to center the books in their divs and give them a little padding at the top so they don't touch each other, so give them another class. I gave them the class book
. The book
class has top-padding
of 15px
and margin
set to auto
.
Lastly, you need to style your shelf. To make it appear that the books are on top of the shelf, you can set the the z-index
to -1
. It already has a position of relative because of the col-xs-12
. That's going to place the shelf
divs behind everything else. At this point, you could use a background image
for your shelf
. If you do, make sure to also add a height
to the shelf
class so that it doesn't collapse.
Instead, I just used a little css trick. I used border bottom
set to 25px solid
and transparent borders left and right
. Just like you'd create a triangle in css, the transparent left and right borders
lop off the sides of the bottom border
and it tricks the eye into having some dimension. I also moved the top position to -15px
so that the shelf would appear to extend below the books. It looks okay, but I'm sure you can dress it up to give an even more realistic appearance, perhaps adding some pseudo elements
to the front and rear of the shelves for added dimension.