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.
Some text inside the first card
Some text inside the second card
Some text inside the third card
Some text inside the fourth card
Some text inside the fifth card
Some text inside the sixth card
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 Deck
The .card-deck class creates an equal height and width grid of cards. The layout will automatically adjust as you insert more cards.
In this example we have added extra content to the first card, to make it taller. Notice how the other cards follow.
Note: The cards are displayed vertically on small screens (less than 576px):
Some text inside the first card
Some text inside the second card
Some text inside the third card
Some text inside the fourth card
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.