Found 641 Articles for CSS Framework

Create Dismissal Alerts in Bootstrap

Chandu yadav
Updated on 12-Jun-2020 18:29:10

375 Views

To create a dismissal alert −Add a basic alert by creating a wrapper and adding a class of .alert and one of the four contextual classes, for example, .alert-success, .alert-info, etc.Also add optional .alert-dismissable to the above class.Add a close button.You can try to run the following code to create dismissal alerts −ExampleLive Demo           Bootstrap Example                                                       ×                    Success! Well done its submitted.                                   ×                    Info! Take this info.          

Create a green button (success) with Bootstrap

Lakshmi Srinivas
Updated on 12-Jun-2020 18:31:12

532 Views

Use the .btn-success class in Bootstrap to create a green button that indicates successExampleLive Demo           Bootstrap Example                                 Click below if you want to know the result of successful students:       Submit    

Create a blue button (primary) with Bootstrap

Nitya Raut
Updated on 12-Jun-2020 18:32:31

290 Views

Use the .btn-primary class in Bootstrap to create a primary button in Bootstrap that is blue in color −ExampleLive Demo           Bootstrap Example                                 Click below if you want to know the result:       Result    

Usage of Bootstrap panel-default

Sharon Christine
Updated on 12-Jun-2020 18:36:42

204 Views

For a basic panel, add class .panel to the element. With that, add class .panel-default to this element.You can try to run the following code to implement a panel-default classExampleLive Demo           Bootstrap Example                                                       This is demo text in a panel.                    

Bootstrap alert class

Arjun Thakur
Updated on 12-Jun-2020 18:34:11

226 Views

Add a basic alert by creating a wrapper and adding a class of .alert and one of the four contextual classes, for example, .alert-success, .alert-info, .alert-warning, .alert-danger.You can try to run the following code to create an alert class −ExampleLive Demo           Bootstrap Example                                          This is Success!                      This is Info!                      This is Warning!                      This is Error!          

Include list groups within any Bootstrap Panel

Ankith Reddy
Updated on 12-Jun-2020 18:41:42

147 Views

To include list groups within Bootstrap panel, create a panel by adding class .panel to the element.Also, add class .panel-default to this element. Now within this panel include your list groups.ExampleLive Demo           Bootstrap Example                                          Tutorials                       List of tutorials                                 C             Java             Ruby             C++                    

Usage of Bootstrap class panel-primary

Samual Sam
Updated on 12-Jun-2020 18:43:01

226 Views

The panel-primary class in Bootstrap is a contextual state class. Yes, it is blue in color.You can try to run the following code to implement a panel-primary class in BootstrapExampleLive Demo           Bootstrap Example                                                       Panel title                                 This is a Basic panel                    

Bootstrap class table

Arjun Thakur
Updated on 12-Jun-2020 18:10:21

196 Views

To create a table in Bootstrap, use the .table class.You can try to run the following code to create a table:Live Demo           Bootstrap Example                                                       Result                                 Top Students of batch 2017-18                                                Student                Marks                Rank                                        David                82                1                                        John                79                2                                        Tom                76                3                                

How to use Bootstrap Scrollspy Plugins

Jennifer Nicholas
Updated on 12-Jun-2020 18:40:22

188 Views

The Scroll spy (auto updating nav) plugin allows you to target sections of the page based on the scrollposition. In its basic implementation, as you scroll, you can add .active classes to the navbar based onthe scroll position.You can try to run the following code to implement scrollspy plugin in Bootstrap −ExampleLive Demo           Bootstrap Example                                                                     ... Read More

Create a table within a Bootstrap Panel

Lakshmi Srinivas
Updated on 12-Jun-2020 18:12:25

1K+ Views

To create a non-bordered table within a panel, use the class .table within the panel.You can try to run the following code to form a table within a panelExampleLive Demo           Bootstrap Example                                                       Panel title                                 This is a demo panel                                                Student                Marks                Rank                                        Amit                97                1                                        Virat                83                2                                        Tom                70                3                                

Advertisements