Found 626 Articles for CSS Framework

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

309 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

188 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

232 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

217 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

78 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

134 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

214 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.      

Bootstrap 4 .flex-*-column class

Ricky Barnes
Updated on 18-Jun-2020 14:02:51

312 Views

Use the .flex-*- column class in Bootstrap to show flex items vertically on different screen sizes:Set it vertically on small, medium, large, etc screen size. Let us see it on small and medium screen size:Small Screen SizeFlex on different screen size (Small)   One   Two   Three Medium Screen SizeFlex on different screen size (Medium)   One   Two   Three The following is an example implementing what I have shown above the usage of flex-*-column −ExampleLive Demo       Bootstrap Example                 ... Read More

Display flex items vertically in Bootstrap 4

Kristi Castro
Updated on 18-Jun-2020 14:06:53

171 Views

To display flex items vertically, use the flex-column class in Bootstrap 4 −Now set the flex-items in it −   One   Two   Three   Four   Five Let us see an example to learn how to learn how to display flex-column class −   ExampleLive Demo       Bootstrap Example                             Example of Flex Column     Stating the usage of flex column class:           One       Two       Three       Four       Five      

Advertisements