card is like a business card having padding around the content. There are options for header, content, footer etc..
holds the content of the card
Contents of the card
The title of card that is displayed on top
Title of card in h2
Adds subtitle or quick small text
Card subtitle
Add lot of text and paragraphs to the card
text.text.text
To add a link to a card; multiple links can be added
the main card image shown on the top
To display an image in the middle, no need to specify card image class as top or bottom, just add the image tag.
display image after the card content
To display image in the background. Can contain text over it.
See the image at background
list of items in a card
add header for a card
This is text for card header
card header with particular heading size, h1-h6
Card header in h3
footer for the card
footer content
contains multiple cards side by side without any margins
…card 1 div tags
…card 2 div tags
creates cards side by side with margins. All cards are of equal size (height and width)
…card 1 div tags
…card 2 div tags
cards are displayed as a grid with rows and columns that adjust automatically as cards are added or removed
…card 1 div tags
…card 2 div tags
used to style the cards by formatting with different colors for text and background
Adds slide show for going through elements in a cyclic fashion
adds animation and CSS transition effect while moving from one slide to next.
adds a fading effect when slide changes from one to next
contains individual slides to the carousel
Add an individual item (slide) to the carousel. The current (first) item is marked as active
indicates the number of slides, current slide being shown as dots/bars at the bottom of the carousel
Adds caption for individual slides (carousel-item)
Collapse
provides basic expand/collapse functionality
Click to expand/collapse
lot of text
accordion collapsible format using the card component
Item #1
text for expand/collapse
Item #2
text for expand/collapse
Allows users to choose one value out of the many options. Dropdown can be a button or link. To add a down-arrow, use the caret class –
and then in the button or link definition, add
To show the dropdown menu with proper spacing around the caret. The caret is centred between the button (or link) and the dropdown menu when expanded.
Use “dropdown-toggle dropdown-toggle-split” along with the button or link class.
Same functionality as dropdown except the caret is pointed up and menu is shown above the button or link.
Use the div class as ‘dropup’ and data-toggle = “dropdown”
Same as dropdown (split) but with menus shown above. The caret is centred between the button/link and the menu items shown when expanded.
to display the dropdown menu on the right side. Add
and then in the menu list element, x-placement="right-start"
Display the dropdown menu on the left side.
To add headers inside the menu list. This is useful when we divide the dropdowns in categories. Add header as another list element –
Add plain text to a dropdown item; can be used as text on links too by adding href
Plain Text
creates a thin horizontal border between links to separate them. Just add the class wherever the divider is required on the list.
To disable any action on a particular dropdown item; use the class “dropdown-item disabled” on the particular item
To make the particular dropdown item active by making the background blue. Add the class “dropdown-item active” to the particular item
right align the drop-down menu
Forms
creates a stacked form with proper margins when added as a wrapper around each input type or form control
all elements are inline and left-aligned
form using the grid
use rows and columns inside form
default class for styling , and elements
large size form area
small size form area
form control to upload file
to have read only contents in the form without losing the styling
to include range element
to create a checkbox input
to create checkboxes side by side
Add items that cannot be clicked; are disabled (greyed out)
adds read only text
container that enhances an input field by adding button, text or icon before or after the field to help the user.
add a help text before the input field
add a help text after the input field
@gmail.com
for small input groups
for large input groups
add check box before or after input field
add radio button before or after input field
add dropdown before or after input field
create custom checkboxes
create custom radio buttons
create custom toggle switch
create custom select options
display custom file upload option
create a custom range menu with rectangle pointer and bar
container for the grid
content
fluid container for full-width
full-width container
row elements of the grid
. column elements for the row
column with specified width
small columns with specified width
extra large column
equal size column
equal width columns – col-sm, col-md, col-lg, col-xl
remove horizontal padding between columns and margins between rows
… column definitions
small, medium, large or extra large offsets with size
order in which the column should appear
columns inside column
Level 1: small column with 10
Nested column 1
Nested column 2
display image and adjust size automatically
represents thumbnail image
Jumbotron
big box created to give extra focus on some special information or text. you can put any valid HTML elements inside jumbotron
heading
Everything will be displayed inside a big grey box
full-width jumbotron occupying the whole horizontal space without displaying the rounded borders
I am fluid jumbotron
I occupy the whole horizontal grey area
display an unordered list with items
highlight the active item
highlight the disabled item
color list items using the color code of the contextual class primary
color list items using the color code of the contextual class secondary
color list items using the color code of the contextual class success
color list items using the color code of the contextual class info
color list items using the color code of the contextual class warning
color list items using the color code of the contextual class danger
colour list items using the color code of the contextual class light
colour list items using the color code of the contextual class dark
list-group with badges
Add badge to list item
Starred
30
list-group with d-flex
full-width box for list items
create horizontal list items
remove borders and rounded corners
provides easy way to align media objects along with content. Used for social media objects like tweets, blog post comments etc…
-- some content adjacent to the media object
achieved by placing a new media container inside the .media-body container
-- some content adjacent to the media object
-- some content adjacent to the nested media object
