Found 626 Articles for CSS Framework

Make Definition list with Bootstrap

Ankith Reddy
Updated on 12-Jun-2020 12:40:11

737 Views

For definition list in Bootstrap, you can try to run the following code −Example Live Demo           Bootstrap lists                                       Lists       Definition List                Description 1          Item 1          Description 2          Item 2             Fruits (Ordered List)                Kiwi          Apple          Mango             Vegetables (UnOrdered List)                Tomato          Brinjal          Broccoli          

Bootstrap Grids

Chandu yadav
Updated on 12-Jun-2020 10:35:47

100 Views

Grid structure content and helps in designing it perfectly. Grid systems are used for creating page layouts through a series of rows and columns that house your content.Here's how the Bootstrap grid system works −Rows must be placed within a .container class for proper alignment and padding.Use rows to create horizontal groups of columns.Content should be placed within the columns, and only columns may be the immediate children of rows.Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.Columns create gutters (gaps between column content) via ... Read More

Make an Ordered list with Bootstrap

George John
Updated on 12-Jun-2020 10:42:09

455 Views

For ordered list in Bootstrap, you can try to run the following code −Example Live Demo           Bootstrap lists                                       Lists       Fruits (Ordered List)                Kiwi          Apple          Mango          

Bootstrap element

George John
Updated on 12-Jun-2020 10:45:01

166 Views

The element in Bootstrap is used to set inline subheadings.You can try to run the following code to implement the element:ExampleLive Demo           Bootstrap small element                                       Heading One          I'm secondary Heading             Heading One          I'm secondary Heading          

Create Inverted Navbar in Bootstrap

George John
Updated on 12-Jun-2020 10:47:41

520 Views

To create an inverted navbar with a black background and with white text, simply add the .navbar-inverse class to the .navbar class.Example Live Demo           Bootstrap Example                                                       TutorialsPoint                                                                    iOS                      SVN                                                                          Java                                                                                                        jmeter                            EJB                            Jasper Report                                                                                              

Bootstrap pull-right class

Arjun Thakur
Updated on 12-Jun-2020 10:51:29

245 Views

Use the default around any HTML text. You can also add a tag for identifying the source of the quote and right aligning the blockquote using class .pull-right:Example Live Demo           Bootstrap pull-right class                                                This is a default blockquote example. This is a default             blockquote example. This is a default blockquote             example.This is a default blockquote example. This is a             default blockquote example.                      This is a blockquote with a source title.          Someone famous in Source Title             This is a blockquote aligned to the right.          Someone famous in Source Title          

Bootstrap element styling

Chandu yadav
Updated on 12-Jun-2020 10:58:46

406 Views

Bootstrap styles elements with a light dotted border along the bottom and reveal the full text on hover.The HTML element provides markup for abbreviations or acronyms, such as NASA, HTTPS, ICC, etc.You can try to run the following to understand how Bootstrap styles the element −Example Live Demo           Bootstrap abbr styling                                       NASA       ICC    

Bootstrap class to emphasize text

Ankith Reddy
Updated on 12-Jun-2020 11:11:06

741 Views

HTML's default emphasis tags such as sets text at 85% the size of the parent, emphasizes a text with heavier font-weight, and emphasizes a text in italics.You can try to run the following code to an emphasis on text −Example Live Demo           Bootstrap emphasis tags                                       This content is within tag       This content is within tag       This content is within tag and is rendered as italics       Left aligned text.       Center aligned text.       Right aligned text.       This content is muted       This content carries a primary class       This content carries a danger class    

Bootstrap lead class

Chandu yadav
Updated on 12-Jun-2020 11:26:25

2K+ Views

The lead class in Bootstrap is used to add emphasis to a paragraph.You can try to run the following code to implement the lead class in Bootstrap −Example Live Demo           Bootstrap lead class                                       Lead Example       This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is an example paragraph demonstrating the use of lead body copy.          

Inline Subheadings in Bootstrap

Ankith Reddy
Updated on 12-Jun-2020 11:34:35

623 Views

To add an inline subheading to any of the headings, simply add around any of the elements or add .small class and you will get a smaller text in a lighter color. You can try to run the following code to work with inline subheadings in Bootstrap −Example Live Demo           Bootstrap Example                                       Heading1 h1.          I'm secondary Heading h1             Heading2 h2.          I'm secondary Heading h2          

Advertisements