Found 2418 Articles for HTML

Clearfix Bootstrap class

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

217 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

380 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

145 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

214 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

172 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          

Set heights and widths of forms with Bootstrap

Chandu yadav
Updated on 12-Jun-2020 13:49:34

1K+ Views

Use classes like .input-lg and .col-lg-* to set the height and width of forms.ExampleYou can try to run the following code to set the form height and width −Live Demo           Bootstrap Example                                                                                                                                                                                .input-lg                                                            Default select                                                            .input-sm                                                                                                                                                                            

Bootstrap Form select

Samual Sam
Updated on 12-Jun-2020 13:55:03

264 Views

A select is used when you want to allow the user to pick from multiple options, but by default, it only allows one.Use for list options with which the user is familiar, such as states or numbers.Use multiple = "multiple" to allow the users to select more than one option.ExampleYou can try to run the following code to implement Bootstrap form selectLive Demo           Bootstrap Example                                                             Country                            India                Australia                US                                

Bootstrap Validation States

Lakshmi Srinivas
Updated on 12-Jun-2020 13:58:42

300 Views

Bootstrap includes validation styles for errors, warnings, and success messages. To use, simply add the appropriate class (.has-warning, .has-error, or .has-success) to the parent element.ExampleYou can try to run the following code to implement the validation statesLive  Demo           Bootstrap Example                                                       Focused                                                                         Disabled                                                                                                           Disabled input (Fieldset disabled)                                                                                                                             Disabled select menu (Fieldset disabled)                                                                        Disabled select                                                                                              Input with success                                                                                                    Input with warning                                                                                                    Input with error                                                                        

Bootstrap Contextual classes

Arjun Thakur
Updated on 12-Jun-2020 12:53:55

1K+ Views

The Bootstrap Contextual Class allows you to change the background color of your table rows or individual cells.The following are the classes −ClassDescription.activeApplies the hover color to a particular row or cell.successIndicates a successful or positive action.warningIndicates a warning that might need attention.dangerIndicates a dangerous or potentially negative actionExampleThe following is an example of the active class −ExampleLive Demo           Bootstrap Table                                                                      Subject                Marks                Student                                                            Maths                90                Amit                                        Science                80                Aman                                        English                85                Rahul                                

Usage of CSS grid-auto-flow property

radhakrishna
Updated on 25-Jun-2020 13:18:24

105 Views

Use the grid-auto-flow property to include auto-placed items in the grid.ExampleYou can try to run the following code to implement the grid-auto-flow property with CSS −Live Demo                    .container {             display: grid;             grid-auto-columns: 50px;             grid-auto-flow: column;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

Advertisements