Bootstrap Cards

* Bootstrap cards provides a flexible component and extensible container for displaying content. Bootstrap cards are bunch of variants and options to delivered .

* A Bootstrap card is a content container and also a component.

* It has many examples for incorporates images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options. Bootstrap also replace old cards like-Bootstrap panels, Bootstrap wells, and Bootstrap thumbnails.

 Creating a Basic Card

The card markup is pretty straight forward. The base class require ourter wrapper .card, whereas content can be placed inside the .card-body.

The following example will show you how to create a card with a picture mixed with some text content and a button.-:

Output

 Content Types for Card Component

The card component support a wide variety of content, including images, text, list groups, links, navs, and more. Here are the examples of what’s supported by the card.

Body Only Card You can simply use .card with .card-body within, whenever you need to create a padded box.

Card with Header and Footer You can also add header and footer within your cards using the .card-header and .card-footer class, respectively.

Placing List Groups within Card You can also place list groups inside the card along with other content types, as shown here.

 Customizing the Card Background

There are several options for customizing the card backgrounds, borders, and color. You can use the text and background utility classes to change the appearance of a card.

 Card Columns-> The .card-columns class creates a masonry-like grid of cards (like pinterest). You are insert more cards the layout will automatically adjust.

Card Deck> The .card-deck class creates a grid of cards that are equal of height and width. The layout will automatically adjust as you will insert more cards.

Card Border and Text You can also customize the text and border color of any card using the text and border utility classes. Just apply these classes on the parent .card or its child elements.

 What is Table?

The tables are used to represent HTML tables and data in grid manner like row and columns. Using Bootstrap you can greatly table in a quick and easiest way toimprove the appearance.

Bootstrap provides a clean layout for building tables. Some of Bootstrap table elements are supported by −:

 Creating a Simple Table with Bootstrap

You can designed a tables with basic styled with has horizontal dividers and small cell padding (8px by default), by just adding the Bootstrap’s class like.table to the table element.

Output-:

 Creating Table with Borders on All Sides

You can also add borders in the all table cells by adding an extra Bootstrap’s class like.table-bordered. to the .table base class.

Output-:

 Enabling Hover State on Table Rows

You can also enable a hover state on table rows within a element by adding the Bootstrap’s class like.table-hover to the .table base class. Here’s an example:

Output-:

 Optional Emphasis Classes for Table Rows

These are more contextual classes to emphasize the row or individual cells data like success, warning, danger, etc. through coloring its background.

Output-:

 Creating Responsive Tables with Bootstrap

You can also design a responsive tables to enable on small devices in horizontal scrolling . To make any responsive table just place the table inside a div element and apply the class like.table-responsive on it. You can also these tables to specify when the table should have a scrollbar, based on the screen width, using the classes .table-responsive{-sm|-md|-lg|-xl}.

Output-:

 Bootstrap Images

Bootstrap extremely use for three classes that can be used to apply some simple styles to images −:

 .img-rounded − It is adding a border-radius:6px to give the image rounded corners.

 .img-circle − It creates the entire image round by adding border-radius:500px.

 .img-thumbnail − It’s adding a bit of padding and a gray border.

Styling Images with Bootstrap

* Images are very commonly used in modern web design. Bootstrap make a styling images and placing it properly on the web pages is very important for improving the user experience.

* You can easily style images using the Bootstrap built-in classes such as making the round cornered or circular images, or give them effect like thumbnails.

Code

Output-:

 Creating Responsive Images and Videos

With Bootstrap you can also make the responsive images too. Just add the class .img-fluid to the  tag. This class mainly applies the styles max-width: 100%; and height: auto; to the image so that it scales nicely to fit the containing element — in case if the image is larger its width than the containing element itself.

Code

Output-:

Non-Responsive Image

---

Responsive Image

 Horizontal Alignment of Images

* You can align the images left or right within a larger box using the .pull-left or .pull-right classes. You can also use the text alignment classes such as .text-left, .text-right, and .text-center on the parent container to align the inline images horizontally left, right, and center.

* However, to center align the block-level images you need to use the .mx-auto margin utility class.

Code

Output-:

Horizontal alignment using float classes

Left alignment using text alignment classes

Right alignment using text alignment classes

Center alignment using text alignment classes

Center alignment of block-level image using auto margin