Category: 02. Examples

Bootstrap Badges Bootstrap Badges are numerical indicators used to show that how many items are associated with the specific link. Badges are used to highlight new or unread items. The class .badge within the <span> element is used to create badges. Bootstrap Badge Example Bootstrap Badge Example 2 You can also use badges inside other elements, such…

In Bootstrap, wells are used to add a rounded border around an element with a gray background color and some padding. It is like a container that displays the content. The class .well is used with <div> element to add well. Example: Bootstrap Wells Size By Default, wells size is medium but you can change the size…

Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style to your messages to make it more appealing to the users. There are four classes that are used within <div> element for alerts. Bootstrap Alert Example Bootstrap4 Alert Bootstrap 4 adds 4 new alerts in Bootstrap Alert…

In Bootstrap, there are three types of form layouts: Bootstrap Form Rules There are three standard rules for these 3 form layouts: 1) Bootstrap Vertical Form (Default) 2) Bootstrap Inline Form In Bootstrap Inline forms, all elements are inline, left-aligned, and the labels are alongside. This example is only applied to forms within viewports that…

Bootstrap Basic Table: The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is used to add basic styling to a table. Example: Bootstrap Striped Rows Table: The .table-striped class is used to add zebra-stripes to a table: about:blank Bootstrap Bordered table: The .table-bordered class is used to add borders on all sides of the table…

Wikipedia says: “In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout…

There are seven styles to add a button in Bootstrap. Use the following classes to achieve the different button styles: Bootstrap Button Example: specifying seven styles There are 3 types of new buttons added in Bootstrap 4 along with 7 buttons given in Bootstrap 3. These 3 buttons are: The following classes are used to…

A Bootstrap jumbotron specifies a big box for getting extra attention to some special content or information. It is displayed as a grey box with rounded corners. It can also enlarge the font sizes of the text inside it. You can put any valid HTML or other Bootstrap elements/ classes inside a jumbotron. The class .jumbotron within…