Found 626 Articles for CSS Framework

How to use Bootstrap Popover Plugins

Samual Sam
Updated on 12-Jun-2020 21:13:58

132 Views

The popover is similar to the tooltip, offering an extended view complete with a heading. For the popover to activate, a user just needs to hover the cursor over the element. The content of the popover can be populated entirely using the Bootstrap Data API.You can try to run the following code to implement popover pluginExampleLive Demo           Bootstrap Example                                                          Popover on left                                 Popover on top                                 Popover on bottom                                 Popover on right                                $(function (){             $("[data-toggle = 'popover']").popover();          });          

Disable a button with Bootstrap

Smita Kapse
Updated on 12-Jun-2020 21:10:02

12K+ Views

Use the .disabled class in Bootstrap to disable a button.You can try to run the following code to implement the .disabled class −ExampleLive Demo           Bootstrap Example                                      Rank of Cricketers          The following are the rank of cricketers:          Enabled          Disabled          

Set the width of an element to 75% in Bootstrap

Chandu yadav
Updated on 12-Jun-2020 21:15:32

668 Views

To set the width of an element to 75%, use the .w-75 class in Bootstrap.You can try to run the following code to set element’s width −ExampleLive Demo           Bootstrap Example                                          Set element width          Normal width          Width is 75%    

Display the collapsible content by default with Bootstrap

Nishtha Thakur
Updated on 12-Jun-2020 21:18:56

203 Views

Use the ‘collapse in’ class in Bootstrap to show collapsible content by default −ExampleLive Demo           Bootstrap Example                                          More Quizzes          More                       We have quizzes on Java, PHP, Ruby, C, C++, etc. as well.                    

Change the order of the Bootstrap grid columns

George John
Updated on 12-Jun-2020 21:21:42

108 Views

Use the .col-*-pull-* and .col-*-push-* classes in Bootstrap to change the order of the Bootstrap grid columns −ExampleLive Demo           Bootstrap Example                                          Bootstrap Example 1                    Right             Left                    

Indicate collapsible content that can be hidden or shown with Bootstrap

karthikeya Boyini
Updated on 12-Jun-2020 21:22:44

74 Views

Use the .collapse class in Bootstrap to indicate collapsible content that can be hidden or shownExampleLive Demo           Bootstrap Example                                          More learning content          More                       We have learning content on Java, PHP, Ruby, C, C++, etc.                    

Move columns to the right with Bootstrap

Samual Sam
Updated on 12-Jun-2020 20:57:24

3K+ Views

To move columns to the right, use the .col-*-offset-* class in Bootstrap.You can try to run the following code to implement itExampleLive Demo           Bootstrap Example                                                                   This is div1.             This is div2.                    

Responsive grid with Bootstrap

Ankith Reddy
Updated on 12-Jun-2020 20:59:00

4K+ Views

To create a responsive grid in Bootstrap, use the .col-*-* class in Bootstrap.In the below example, we have 4 divs −ExampleLive Demo           Bootstrap Example                                                                      This is div1.                                        This is div2.                                        This is div3.                                        This is div4.                                

Breadcrumb in Bootstrap

Smita Kapse
Updated on 12-Jun-2020 21:24:02

89 Views

Breadcrumbs show hierarchy-based information. In site in blogs, breadcrumbs can show the dates of publishing, categories, or tags.A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb as in the following code −ExampleLive Demo           Bootstrap Example                                       Home       Tutorials       Java          

Usage of Bootstrap label class

Lakshmi Srinivas
Updated on 12-Jun-2020 21:01:32

195 Views

Bootstrap label class is used to add labels such as tips, count, etc.Let us see an example to implement label classExampleLive Demo           Bootstrap Example                                 Tools                       40                       QA                       1000                    

Advertisements