Found 10483 Articles for Web Development

Bootstrap 4 .flex-wrap class

Alex Onsman
Updated on 18-Jun-2020 14:29:50

2K+ Views

Use the flex-wrap class in Bootstrap 4 to wrap flex items. The following is the code snippet to wrap the flex items −   .   .  

Container to create a grid of Bootstrap 4 cards like a group

David Meador
Updated on 18-Jun-2020 14:31:59

362 Views

To set a container for Bootstrap card and set it like a group, use the card-group class.Use it and create a grid like the following with two Bootstrap cards −             Demo Text!                          Warning!           The following is an example to create a grid (group of cards) in Bootstrap −ExampleLive Demo       Bootstrap Example                             Group of Messages                             Demo Text!                                       Warning!                                        Well done!                                       Selected!                        

Bootstrap .modal("toggle") method

David Meador
Updated on 18-Jun-2020 14:33:59

2K+ Views

Use the .modal(“toggle”) method in Bootstrap to toggle the modal.As shown below, the modal generates on the click of a button −$(document).ready(function(){   $("#button1").click(function(){     $("#newModal").modal("toggle");   }); });Here is the button used above −   Modal One You can try to run the following code to implement the modal(“toggle”) method −ExampleLive Demo       Bootstrap Example                             Sample     Modal One                                         ×             Sample Modal                                 Click outside to close it.                                 Close                                   $(document).ready(function(){     $("#button1").click(function(){       $("#newModal").modal("toggle");     });   });  

Bootstrap 4 .card-group class

David Meador
Updated on 18-Jun-2020 14:35:59

421 Views

Use the card-group class to create a group of cards in Bootstrap 4 −                         Let us create a group of cards like a grid in Bootstrap −ExampleLive Demo       Bootstrap Example                             Group of Messages                             Argentina won convincingly!                                       Demo Text!                                       Do not cross!                                       I did it!                                       It worked!                    

Bootstrap 4 .d-flex class implementation

David Meador
Updated on 18-Jun-2020 14:37:41

282 Views

Use the d-flex class in Bootstrap to create a flexbox container.Here, I have set two flex items −     One   Two You can try to run the following code to implement the .d-flex class −ExampleLive Demo       Bootstrap Example                             Understanding Flex             One       Two      

Bootstrap 4 Button .btn-outline-dark class

Ricky Barnes
Updated on 18-Jun-2020 13:52:00

334 Views

Use the .btn-outline-dark class in Bootstrap to set dark outline on a button.The following is an example of a button with dark outline −Set the above outline to the button, using the btn-outline-dark class as shown below −   Submit You can try to run the following code to implement the btn-outline-dark class −ExampleLive Demo       Bootstrap Example                               Bootstrap 4     Learning  btn-outline-dark class usage:     Submit  

Bootstrap 4 .border-0 class

Ricky Barnes
Updated on 18-Jun-2020 13:53:39

329 Views

Use the border-0 class in Bootstrap to eliminate all borders from an element as shown below −   No border We have also set CSS style above −.mystyle {   width: 120px;   height: 100px;   margin: 10px;   background: gray; }You can try to run the following code to implement the border-0 class −ExmapleLive Demo       Bootstrap Example                               .mystyle {       width: 120px;       height: 100px;       margin: 10px;       background: gray;     }             Two Rectangles     orange border     No border  

Set a white border to an element in Bootstrap

Ricky Barnes
Updated on 18-Jun-2020 13:56:01

164 Views

Use the border-white class in Bootstrap 4 to set white border to an element.   This has white border The test class above styles the element as shown below − .test {   width: 120px;   height: 100px;   margin: 10px;   background: blue; } Let us see an example to implement the border-white class in Bootstrap −ExampleLive Demo       Bootstrap Example                             .test {       width: 120px;       height: 100px;       margin: 10px;       background: blue;     }               Two Rectangles     This has white border     This has orange border  

Set orange border on an element in Bootstrap to indicate danger

Ricky Barnes
Updated on 18-Jun-2020 13:57:46

202 Views

To set orange border to an element, use the border-warning class −   Danger (Orange border) Set the style for the element − .mystyle {   width: 200px;   height: 100px;   margin: 10px; } Let us see an example to implement the border-warning class in Bootstrap −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 200px;       height: 100px;       margin: 10px;     }             The following are two Rectangles:     Danger (Orange border)  

border-top-0 class in Bootstrap 4

Ricky Barnes
Updated on 18-Jun-2020 14:00:57

306 Views

Use the border-top-0 class in Bootstrap 4 to remove the top border.Set the border-top-0 class −   Rectangle is missing the TOP border. Let us see an example to implement the border-top-0 class −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 350px;       height: 170px;       margin: 10px;     }             Heading Two           Rectangle is missing the TOP border.      

Advertisements