2

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,

4
  • Can u add what you have tried? Go through getbootstrap.com/css/#grid
    – Roy M J
    Sep 16, 2014 at 9:12
  • codepen.io/anon/pen/DsiFl
    – Sr070960
    Sep 16, 2014 at 13:29
  • After that, Im not sure how to stick those books to book case image and also in ipad landscape mode grid should be same as desktop mode (with small image size), view more button to show more than 6 books when clicked
    – Sr070960
    Sep 16, 2014 at 13:40
  • that's your HTML, but you're asking for CSS, so what CSS have you tried? Sep 16, 2014 at 21:57

1 Answer 1

15

Here's a concept for you:

DEMO

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.

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.