Found 730 Articles for JQuery

Align the components with Bootstrap

Lakshmi Srinivas
Updated on 12-Jun-2020 17:11:08

339 Views

To align the components like nav links, forms, buttons, or text to left or right in a navbar using the utility classes .navbar-left or .navbar-right. Both classes will add a CSS float in the specified direction.ExampleYou can try to run the following code to align componentsLive Demo           Bootstrap Example                                                       Alignment                                                                                                    Java                                                                                jmeter                      EJB                      Jasper Report                                            Separated link                                            One more separated link                                                                          Left align-Submit Button                         Left align-Text                                                                                Java                                                                                jmeter                      EJB                      Jasper Report                                            Separated link                                            One more separated link                                                                                             Right align-Submit Button                                         Right align-Text                    

Wrap Strings of Text in Bootstrap Navbar

Ankith Reddy
Updated on 12-Jun-2020 16:33:58

586 Views

To wrap strings of text in an element using the class .navbar-text.ExampleYou can try to run the following code to set text in Bootstrap Navbar −Live Demo           Bootstrap Example                                                       Demo                                 Copyright © 2018                    

Usage of Bootstrap Input Groups

karthikeya Boyini
Updated on 12-Jun-2020 16:10:02

135 Views

By adding prepended and appended content to an input field, you can add common elements to the user’s input. For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your application interface.ExampleYou can try to run the following code to create Bootstrap Input GroupLive Demo           Bootstrap Input Group                                                                      @                                                                                    .00                                                     span class = "input-group-addon">$                                .00                                

Split Button Dropdowns with Bootstrap

Daniol Thomas
Updated on 12-Jun-2020 15:51:10

523 Views

Split button dropdowns use the same general style as the dropdown button but add a primary action along with the dropdown. Split buttons have the primary action on the left and a toggle on the right that displays the dropdown.ExampleYou can try to run the following code to split button dropdowns −Live Demo           Bootstrap Example                                          Admissions                                   Toggle Dropdown                                 Masters             Bachelors                                Faculty                                   Toggle Dropdown                                 Management             Technical             Staff                    

Bootstrap Button Group Classes

karthikeya Boyini
Updated on 12-Jun-2020 15:10:57

196 Views

Use the class .btn-group to work with Bootstrap Button Group Class. You can try to run the following code to form button groupExampleLive Demo           Bootstrap Example                                 The following are the buttons:                A          B          C          

Clearfix Bootstrap class

George John
Updated on 12-Jun-2020 14:58:47

348 Views

Use the .clearfix class to clear the float of any element in Bootstrap.ExampleYou can try to run the following code to implement the clearfix class:Live Demo           Bootstrap Example                                                       Quick Float to left                                 Quick Float to right                    

Clear the float of an element with Bootstrap

Lakshmi Srinivas
Updated on 12-Jun-2020 14:59:29

577 Views

To clear the float of an element, use the .clearfix Bootstrap class.ExampleYou can try to run the following code to clear float of an elementLive Demo           Bootstrap Example                                                       left                                 right                    

Bootstrap Helper Classes

Arjun Thakur
Updated on 12-Jun-2020 14:33:14

215 Views

The helper classes in Bootstrap include the pull-left,.pull-right, .center-block, and other classes.Let us see an example of .clearfix class −To clear the float of any element, use the .clearfix class −ExampleLive Demo           Bootstrap Example                                                       Quick Float to left                                 Quick Float to right                    

img-rounded Bootstrap class

George John
Updated on 12-Jun-2020 14:37:56

297 Views

Use the img-rounded Bootstrap class to style your image and give it rounded corners:ExampleLive Demo           Bootstrap Images                                 Styling images with Bootstrap       Original Image             Rounded Image          

Add sizes for Bootstrap Buttons

Arjun Thakur
Updated on 12-Jun-2020 14:26:25

246 Views

To add size for buttons in Bootstrap, try the following classes:ClassDescription.btn-lgThis makes the button size large..btn-smThis makes the button size small..btn-xsThis makes the button size extra small..btn-blockThis creates block level buttons—those that span the full width of a parent.ExampleYou can try to run the following code to create a small button −Live Demo           Bootstrap Example                                                  Small button          

Advertisements