Home Ask Login Register

Developers Planet

Your answer is one click away!

KindeR66 February 2016

Bootstrap cards/thumbnails not lining up side by side correctly in the grid system & card deck

I'm having a problem with getting Boostrap's thumbnails & cards to line up side by side in their grid system. Basically, this is an assignment & I have to follow certain parameters: -must use Bootstrap grid system sm-size columns -these squares of content (thumbnails or cards) must stack up equally vertically in a mobile screen and equally as 3 squares side by side for larger screen -everything must be fluid & responsive -and must match up a mock-up picture I was given

At first, I tried just using cards but they didn't have an outline like the way my mock-up picture is; then I tried using just thumbnails but they didn't stack vertically the way I needed them to. Now, using cards & thumbnails, I get them looking more the way I want visually & they stack correctly horizontally for smaller screens but they are Not stacking side-by-side when I make the screen larger...

I still have a Long way to go to finishing this assignment, I still really have to create a ton of CSS but I feel like first I need to fix this integral layout problem/why these aren't stacking correctly as a responsive unit.

Here are links to my Fiddles: (my last one using cards & thumbnails): https://jsfiddle.net/Tamara6666/1n6nau4c/

and the 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>        

Answers


siddaka sivareddy February 2016

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="card-deck-wrapper">
          <div class="card-deck">
            <div class="col-sm-4">
              <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 TO CART</button></p>
      


vanburen February 2016

You're using 2 distinct versions of Bootstrap (Cards are V4 and Thumbnails are V3) but using the same CSS for both (v3.3.6).

Sidenote: if you need to place your own images on jsFiddle you'll need to place them somewhere accessible over the 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 to build on the card title and make up the bulk of the 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 at 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>
         

Post Status

Asked in February 2016
Viewed 1,023 times
Voted 7
Answered 2 times

Search




Leave an answer


Quote of the day: live life

Devs Planet ®

2014-2016 www.devsplanet.com

Devs Planet © all rights reserved

Search