Bootstrap 4 .flex-wrap class

Alex Onsman
Published on 21-Jul-2018 15:14:58
Use the flex-wrap class in Bootstrap 4 to wrap flex items. The following is the code snippet to wrap the flex items −<div class="d-flex flex-wrap bg-primary">   .   .   <!--  flex items - - >   .   . </div>Let us set some flex items in the flex-wrap ... Read More

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

David Meador
Published on 21-Jul-2018 15:08:51
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 −<div class="card-group">   <div class="card bg-primary">     <div class="card-body text-center">       <p class="card-text">Demo Text!</p>     </div>   ... Read More

Bootstrap .modal("toggle") method

David Meador
Published on 21-Jul-2018 15:04:37
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 −<button type="button" class="btn btn-default btn-lg" id="button1">   Modal One </button>You can try to run the ... Read More

Bootstrap 4 .card-group class

David Meador
Published on 21-Jul-2018 15:00:51
Use the card-group class to create a group of cards in Bootstrap 4 −<div class="card-group">   <div class="card bg-success">     <! - -  One  - - >   </div>   <div class="card bg-success">     <! - -  Two  - - >   </div>   <div class="card bg-success"> ... Read More

Bootstrap 4 .d-flex class implementation

David Meador
Published on 21-Jul-2018 14:56:08
Use the d-flex class in Bootstrap to create a flexbox container.Here, I have set two flex items −<div class="d-flex p-3 bg-primary text-white">     <div class="p-2 bg-success">One</div>   <div class="p-2 bg-danger">Two</div> </div>You can try to run the following code to implement the .d-flex class −ExampleLive Demo<!DOCTYPE html> <html lang="en">   ... Read More

Bootstrap 4 Button .btn-outline-dark class

Ricky Barnes
Published on 21-Jul-2018 12:49:01
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 −<button type="button" class="btn btn-outline-dark">   Submit </button>You can try to run the following ... Read More

Bootstrap 4 .border-0 class

Ricky Barnes
Published on 21-Jul-2018 12:41:46
Use the border-0 class in Bootstrap to eliminate all borders from an element as shown below −<div class="mystyle border border-0">   No border </div>We have also set CSS style above −.mystyle {   width: 120px;   height: 100px;   margin: 10px;   background: gray; }You can try to run the ... Read More

Set a white border to an element in Bootstrap

Ricky Barnes
Published on 21-Jul-2018 12:37:53
Use the border-white class in Bootstrap 4 to set white border to an element.<div class="test border border-white">   This has white border </div>The test class above styles the element as shown below −<style> .test {   width: 120px;   height: 100px;   margin: 10px;   background: blue; } </style>Let us ... Read More

Set orange border on an element in Bootstrap to indicate danger

Ricky Barnes
Published on 21-Jul-2018 12:32:43
To set orange border to an element, use the border-warning class −<div class="mystyle border border-warning">   Danger (Orange border) </div>Set the style for the element −<style> .mystyle {   width: 200px;   height: 100px;   margin: 10px; } </style>Let us see an example to implement the border-warning class in Bootstrap ... Read More

border-top-0 class in Bootstrap 4

Ricky Barnes
Published on 21-Jul-2018 12:29:43
Use the border-top-0 class in Bootstrap 4 to remove the top border.Set the border-top-0 class −<div class="mystyle border border-top-0">   Rectangle is missing the TOP border. </div>Let us see an example to implement the border-top-0 class −ExampleLive Demo<!DOCTYPE html> <html lang="en">   <head>     <title>Bootstrap Example</title>     <meta ... Read More
Advertisements