Found 700 Articles for Bootstrap

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  

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)  

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.      

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

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      

The hide.bs.modal event in Bootstrap fires when the modal is about to be hidden.Firstly, hide the Bootstrap modal on button click −$("#button1").click(function(){   $("#newModal").modal("hide"); });Now, use the hide.bs.modal class and generate the alert when the modal is about to hide on button click −$("#newModal").on('hide.bs.modal', function () {   alert('The modal is about to be hidden.'); });Let us see an example stating the usage of hide.bs.modal event −ExampleLive Demo       Bootstrap Example                             #button1 {       ... Read More

Use the border-right-0 class in Bootstrap to remove the right border.To remove the right border −   Rectangle is missing the right border. Style the div as −.mystyle {   width: 350px;   height: 170px;   margin: 10px; }You can try to run the following code to implement the border-right- 0 class −ExampleLive Demo   Bootstrap Example               .mystyle {     width: 350px;     height: 170px;     margin: 10px;   }         Heading Two     Rectangle is missing the right border.  

Add a blue border to an element in Bootstrap 4 using the border-primary class as shown below:Set the class as −   Blue Border You can try to run the following code to implement the border-primary class −ExampleLive Demo       Bootstrap Example                             .demo {       width: 250px;       height: 170px;       margin: 10px;     }             Demo Heading     Blue Border  

To set a light grey border to an element, use the border border-light class in Bootstrap 4.Adding a light border is easy as shown below −   This element has light border You can try to run the following code to implement the border-light-class −ExampleLive Demo       Bootstrap Example                             .demo {       width: 150px;       height: 220px;       margin: 15px;     }             Demo     This element has light border  

The modal(“show”) method opens a modal like below −The modal is displayed using the modal(“show”) method as shown below −$("#newModal").modal("show");Let us see an example of modal(“show”) method −ExampleLive Demo       Bootstrap Example                             #button1 {       width: 140px;       padding: 20px;       bottom: 150px;       z-index: 9999;       font-size: 15px;       position: absolute;       margin: 0 auto;     }     ... Read More