Found 700 Articles for Bootstrap

Use .align-items-*-center class in Bootstrap 4 to align single rows of items in the center on different screens      .Let us see how to align flex items on a single row in the center of small, medium, and large screen sizes −Align on Small Screen Size in the center   Item 1   Item 2   Item 3   Item 4 Align on Medium Screen Size in the center   Item 1   Item 2   Item 3   Item 4 Align on Large Screen Size in the center   Item 1   Item 2   Item 3   ... Read More

Use the align-baseline class in Bootstrap 4 to align an element with the baseline of the parent elment.Set the align-baselinec class like the following code snippet −Now add the content inside it −     Demo Baseline You can try to run the following code to align an element with the parent’s baseline −ExampleLive Demo       Bootstrap Example                                   Example       This is demo text       Demo Baseline      

To set an element to have rounded corner, use the rounded-bottom class in Bootstrap 4.Set the rounded-bottom class −In the above , I have also set another class for styling the element −.demo {   width: 100px;   height: 120px;   margin: 10px;   background-color: orange; }You can try to run the following code to implement the rounded-bottom class −ExampleLive Demo       Bootstrap Example                             .demo {       width: 100px;       height: 120px;       margin: 10px;       background-color: orange;     }                   Rectangles       We have two rectangles with rounded corners (bottom):                  

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

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!                        

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");     });   });  

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!                    

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      

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  

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