CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designgrid-layout
KindeR66
KindeR66

Reputation: 37

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>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>
  </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 TO 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 TO CART</button></p>
  </div>
</div>
</div>


</div>
</div>

</div>
</div>


</div>
</main>
</body>

(my first one using just 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 TO 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 TO 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 TO CART</button></p>
      </div>
    </div>
  </div>
</div>

But, Neither are stacking or acting in a fluid/responsive manner Correctly- everything must be fluid & each box must stack Equally side by side in larger screen and stack equally on top of eachother, each box taking up the entire horizontal space on a smaller screen. The first example is closer to how it needs to look for smaller screens but isn't stacking side by side at all...

The second one starts side by side (but the boxes aren't equal) but it doesn't stack on top of each other correctly for mobile. I feel like I need to sort out this layout problem before I get really deep into the css & other elements of this project & I don't really know why it's not working; I've tried putting the cards in a deck and in a wrapper but that didn't work.

Any help would be Greatly appreciated, Thank You!

**Also, I have to turn in this assignment via JSFiddle- does anyone know How I get my Img's to appear on there? I learned on old fashioned html/css where you put your img's in the folder w/your code so I'm not sure what to do on JS Fiddle- do they go in external resources & if so, how?

Thanks Alot! Hopefully I'll learn this & figure it all out w/some help!

Upvotes: 1

Views: 13625

Answers (2)

vanburen
vanburen

Reputation: 21653

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>
            <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>
            <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>
            <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>
            <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>
            <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>
  </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>

Upvotes: 5

siddaka sivareddy
siddaka sivareddy

Reputation: 1

<!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>
                  </div>
                  <!--card-block-->
                </div>
                <!--card-->
              </div>
              <!--thumbnail-->
            </div>
            <!--col-sm-6-->
            <div class="col-sm-4">
              <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 TO CART</button></p>
                  </div>
                  <!--card-block-->
                </div>
                <!--card-->
              </div>
              <!--thumbnail-->
            </div>
            <!--col-sm-4-->
            <div class="col-sm-4">
              <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 TO CART</button></p>
                  </div>
                  <!--card-block-->
                </div>
                <!--card-->
              </div>
              <!--thumbnail-->
            </div>
            <!--cols-m-4-->
          </div>
          <!--card-check-->
        </div>
        <!--card-deck-wrapper-->
      </div>
      <!--row-->
    </div>
    <!--container-fluid-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

Upvotes: 0

Related Questions