Found 700 Articles for Bootstrap

How to use Bootstrap Button Plugins

Smita Kapse
Updated on 15-Jun-2020 06:34:08

78 Views

Add in some interaction such as control button states or create groups of buttons for more components like toolbars with the plugin.You can try to run the following code to implement button plugin −ExampleLive Demo           Bootstrap Example                                 Button Example                             Primary                                $(function () {             $("#myButtons1 .btn").click(function(){                $(this).button('toggle');             });          });          

Large input field with Bootstrap

Arjun Thakur
Updated on 15-Jun-2020 06:32:44

378 Views

Use the .input-lg class to set large input field in Bootstrap.You can try to run the following code to implement .input-lg class −ExampleLive Demo           Bootstrap Example                                                      Candidate Profile                                      What is your job profile?                                   Programmer                   Web Developer                   DBA                   Support Engineer                                                        Educational Qualifcation                                   Undergraduate                   Graduate                   Post-Graduate                                                

Create an extra small button group with Bootstrap

Smita Kapse
Updated on 15-Jun-2020 06:35:32

218 Views

To create a large button group in Bootstrap, use the .btn-group-xs class.You can try to run the following code to implement the .btn-group-xs class −ExampleLive Demo           Bootstrap Example                                 The following are the car brands:                BMW          Audi          Jeep          Datsun          Toyota             The following are FMCG:                ITC Limited          Colgate-Palmolive          Nestle          Britannia Industries Limited          

Bootstrap progress-bar class

George John
Updated on 15-Jun-2020 06:36:49

184 Views

Use the progress-bar class in Bootstrap to create a progress bar.You can try to run the following code to implement progress-bar class in Bootstrap −ExampleLive Demo           Bootstrap Example                                                       70% Complete                    

Set danger action for a list item in a list group with Bootstrap

Smita Kapse
Updated on 15-Jun-2020 06:38:08

64 Views

Use the .list-group-item-danger class in Bootstrap to set danger action for a list item in a list group −ExampleLive Demo           Bootstrap Example                                          Demo One                                      A                                        B                                

Item text inside the list group in Bootstrap

Chandu yadav
Updated on 15-Jun-2020 06:39:35

239 Views

To set item text inside the list group, use the .list-group-item-text class.You can try to run the following code to implement the .list-group-item-text class −ExampleLive Demo           Bootstrap Example                                          Cars                                      Hyundai                i10                i20                                        Volkswagen                                Vento                Polo                                

Create a list group heading in Bootstrap

Vrundesha Joshi
Updated on 12-Jun-2020 22:23:51

2K+ Views

To create a list group heading, use the .list-group-item-heading class in Bootstrap.You can try to run the following code to implement .list-group-item-heading class −ExampleLive Demo           Bootstrap Example                                          Countries                                      Asia                India                Nepal                                        Europe                Germany                Italy                Spain                                

Create a striped Bootstrap progress bar

Ankith Reddy
Updated on 12-Jun-2020 22:26:06

438 Views

Follow the below given steps to create a striped progress bar in Bootstrap −Add a with a class of .progress and .progress-striped.Next, inside the above , add an empty with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.Add a style attribute with the width expressed as a percentage. Say, for example, style = "60%"; indicates that the progress bar was at 60%.You can try to run the following code to form a striped progress bar −ExampleLive Demo           Bootstrap Example                                 Striped Progress Bars       Warning Progress Bar                             45%Complete (warning)                       Danger Progress Bar                             80% Complete (danger)                    

Create a bordered list group in Bootstrap

Arjun Thakur
Updated on 12-Jun-2020 22:28:43

121 Views

Use the .list-group class in Bootstrap to create a bordered list group.You can try to run the following code to implement .list-group class −ExampleLive Demo           Bootstrap Example                                          Countries                       US             India             Netherlands             Germany                    

How to use the Glyphicons icons in Bootstrap

Smita Kapse
Updated on 12-Jun-2020 22:27:06

1K+ Views

To use the Glyphicons icon in Bootstrap, use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding like −ExampleLive Demo         Bootstrap Example                                     You can try to run the following code to implement the Glyphicons icons:ExampleLive Demo           Bootstrap Example                                 The following are the icons:                                                                                                                

Advertisements