html - Bootstrap cards/thumbnails not lining up side by side correctly in the grid system & card deck -
i'm having problem getting boostrap's thumbnails & cards line side side in grid system. basically, assignment & have follow parameters: -must use bootstrap grid system sm-size columns -these squares of content (thumbnails or cards) must stack equally vertically in mobile screen , equally 3 squares side side larger screen -everything must fluid & responsive -and must match mock-up picture given
at first, tried using cards didn't have outline way mock-up picture is; tried using thumbnails didn't stack vertically way needed them to. now, using cards & thumbnails, them looking more way want visually & stack correctly horizontally smaller screens not stacking side-by-side when make screen larger...
i still have long way go finishing assignment, still have create ton of css feel first need fix integral layout problem/why these aren't stacking correctly responsive unit.
here links fiddles: (my last 1 using cards & thumbnails): https://jsfiddle.net/tamara6666/1n6nau4c/
and code:
<body> <main> <div class="container-fluid"> <div class="row"> <div class="card-deck-wrapper"> <div class="card-deck"> <div class="col-sm-6"> <div class="thumbnail"> <div class="card"> <img class="card-img-top img-responsive" img src="peppers.jpeg" alt="peppers"> <div class="card-block"> <h4 class="card-title">$1.00</h4> <p></p> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>add cart</button></p> </div> </div> </div> <div class="col-sm-6"> <div class="thumbnail"> <div class="card"> <img class="card-img-top img-responsive" img src="rasp.jpeg" alt="raspberries"> <div class="card-block"> <h4 class="card-title">$2.50 <br><small>$5.00 total</small></h4> <p></p> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>add cart</button></p> </div> </div> </div> <div class="col-sm-6"> <div class="thumbnail"> <div class="card"> <img class="card-img-top img-responsive" img src="kiwis.jpg" alt="kiwis"> <div class="card-block"> <h4 class="card-title">$.30 <br><small>$2.40 total</small></h4> <p></p> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>add cart</button></p> </div> </div> </div> </div> </div> </div> </div> </div> </main> </body> (my first 1 using thumbnails): https://jsfiddle.net/tamara6666/5thon1mb/
<body> <main> <div class="container-fluid"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="peppers.jpeg" alt="peppers" class="img-responsive"> <div class="caption"> <h3 class="text-left">$1.00</h3> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <br> <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>add cart</button></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="rasp.jpeg" alt="raspberries" class="img-responsive"> <div class="caption"> <h3 class="text-left">$2.50 <br><small>$5.00 total</small></h3> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <br> <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>add cart</button></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="kiwis.jpg" alt="kiwis" class="img-responsive"> <div class="caption"> <h3 class="text-left">$.30 <br><small>$2.40 total</small></h3> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <br> <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>add cart</button></p> </div> </div> </div> </div> but, neither stacking or acting in fluid/responsive manner correctly- must fluid & each box must stack equally side side in larger screen , stack equally on top of eachother, each box taking entire horizontal space on smaller screen. first example closer how needs smaller screens isn't stacking side side @ all...
the second 1 starts side side (but boxes aren't equal) doesn't stack on top of each other correctly mobile. feel need sort out layout problem before deep css & other elements of project & don't know why it's not working; i've tried putting cards in deck , in wrapper didn't work.
any appreciated, thank you!
**also, have turn in assignment via jsfiddle- know how img's appear on there? learned on old fashioned html/css put img's in folder w/your code i'm not sure on js fiddle- go in external resources & if so, how?
thanks alot! i'll learn & figure out w/some help!
you're using 2 distinct versions of bootstrap (cards v4 , thumbnails v3) using same css both (v3.3.6).
sidenote: if need place own images on jsfiddle you'll need place them somewhere accessible on public internet. ie web server etc.
see working example snippets.
bootstrap v4 card grid (your first jsfiddle)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" /> <main> <div class="container-fluid"> <div class="row"> <div class="col-sm-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="card image cap"> <div class="card-block"> <h4 class="card-title">card title</h4> <p class="card-text">some quick example text build on card title , make bulk of card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">cras justo odio</li> <li class="list-group-item">dapibus ac facilisis in</li> <li class="list-group-item">vestibulum @ eros</li> </ul> <div class="card-block"> <a href="#" class="card-link">card link</a> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="card image cap"> <div class="card-block"> <h4 class="card-title">card title</h4> <p class="card-text">some quick example text build on card title , make bulk of card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">cras justo odio</li> <li class="list-group-item">dapibus ac facilisis in</li> <li class="list-group-item">vestibulum @ eros</li> </ul> <div class="card-block"> <a href="#" class="card-link">card link</a> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="card image cap"> <div class="card-block"> <h4 class="card-title">card title</h4> <p class="card-text">some quick example text build on card title , make bulk of card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">cras justo odio</li> <li class="list-group-item">dapibus ac facilisis in</li> <li class="list-group-item">vestibulum @ eros</li> </ul> <div class="card-block"> <a href="#" class="card-link">card link</a> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="card image cap"> <div class="card-block"> <h4 class="card-title">card title</h4> <p class="card-text">some quick example text build on card title , make bulk of card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">cras justo odio</li> <li class="list-group-item">dapibus ac facilisis in</li> <li class="list-group-item">vestibulum @ eros</li> </ul> <div class="card-block"> <a href="#" class="card-link">card link</a> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="card image cap"> <div class="card-block"> <h4 class="card-title">card title</h4> <p class="card-text">some quick example text build on card title , make bulk of card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">cras justo odio</li> <li class="list-group-item">dapibus ac facilisis in</li> <li class="list-group-item">vestibulum @ eros</li> </ul> <div class="card-block"> <a href="#" class="card-link">card link</a> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="card image cap"> <div class="card-block"> <h4 class="card-title">card title</h4> <p class="card-text">some quick example text build on card title , make bulk of card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">cras justo odio</li> <li class="list-group-item">dapibus ac facilisis in</li> <li class="list-group-item">vestibulum @ eros</li> </ul> <div class="card-block"> <a href="#" class="card-link">card link</a> </div> </div> </div> </div> </div> </main>bootstrap 3 thumbnail grid (your second jsfiddle)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <main> <div class="container-fluid"> <div class="row"> <div class="col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/750x325" alt="..."> <div class="caption"> <h3>thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">button</a> <a href="#" class="btn btn-default" role="button">button</a> </p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/750x325" alt="..."> <div class="caption"> <h3>thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">button</a> <a href="#" class="btn btn-default" role="button">button</a> </p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/750x325" alt="..."> <div class="caption"> <h3>thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">button</a> <a href="#" class="btn btn-default" role="button">button</a> </p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/750x325" alt="..."> <div class="caption"> <h3>thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">button</a> <a href="#" class="btn btn-default" role="button">button</a> </p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/750x325" alt="..."> <div class="caption"> <h3>thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">button</a> <a href="#" class="btn btn-default" role="button">button</a> </p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/750x325" alt="..."> <div class="caption"> <h3>thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">button</a> <a href="#" class="btn btn-default" role="button">button</a> </p> </div> </div> </div> </div> </div> </main>
Comments
Post a Comment