CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Maddy
Maddy

Reputation: 2224

Bootstrap - Card vs Container

I'm new to bootstrap and I came across examples for using cards and containers to contain other elements. Could someone please explain the difference and when to use them?

Upvotes: 3

Views: 10054

Answers (3)

Lars Peterson
Lars Peterson

Reputation: 1508

My answer will explain the difference between cards and containers.

Containers

Containers are one of the most fundamental and basic bootstrap components. You use containers with their counterpart, rows, to create basic or complex content orientations in grids. Containers are for a websites layout. Documentation.

<div class='container'>

Cards

Cards, added in Bootstrap v4, define a way of displaying content. Try to visualize containers as content alignment and cards as content structure and design. Documentation.

<div class='card'>

Although cards are technically containers at their core, with a little more style, both have completely different intents.

Upvotes: 2

Lalit Sachdeva
Lalit Sachdeva

Reputation: 6629

Two very different things from every aspects.

1) Containers, I mostly refer it to the "container" of the page, so as you start creating any page you define something like this

<html>
<head></head>
<body>
<div class="container"></div>
</body>
</html>

2) whereas Cards: nice component, used to have some predefined layouts/structure and mostly used in as image thumbnail, accordions, tabs, notifications, information box, galleries and I can also say for boxes

<html>
<head></head>
<body>
<div class="container">
<div class="cards">
<!-- card header -->
<!-- card body -->
</div>
</div>
</body>
</html>

Upvotes: 1

Ahmad
Ahmad

Reputation: 455

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. for example: 

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." 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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Check Here for more info.

While as for Containers, Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable. Use .container for a responsive fixed width container.

<div class="container">
  ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

<div class="container-fluid">
  ...
</div>

Check here for more info. Hope this is helpful

Upvotes: 0

Related Questions