If you want to wrap flex items in Bootstrap, then use the flex-wrap class. To wrap, use −       India   US   UK   Australia   Denmark You can try to run the following code to avoid wrapping of flex items −ExampleLive Demo       Bootstrap Example                             Flex Examples     Wrap - Yes           India       US       UK       Australia       Denmark       India       Poland       Netherlands       Ireland       Brazil       Russia       Morocco         Wrap - No           India       US       UK       Australia       Denmark       India       Poland       Netherlands       Ireland       Brazil       Russia       Morocco          

To set subtitle after a title in Bootstrap card, use the card-subtitle class.Let us see how −   Set Subtitle here Add the above after the card-title class and inside the card-body class −   Sports   Indoor   Squash, Dart, Chess You can try to run the following code to set subtitle in a Bootstrap card −ExampleLive Demo       Bootstrap Example                             Indoor Sports                   Sports         Indoor         Squash, Dart, Chess            

Use the flex-*-fill class to set the flex items to have equal width on different screens as shown in the below code snippet −For Small Width Screen   A   B   C For Medium Width Screen   A   B   C The following is an example to implement the flex-*fill class −ExmapleLive Demo       Bootstrap Example                                 Flex (Small Width)           A       B       C         Flex (Medium Width)           A       B       C         Flex (Large Width)           A       B       C      

If you want to set rounded right corner to an element, then use the rounded-right class in Bootstrap 4.Adding it to the web page is not a tiresome task. Just add the class to div class −The one class above is used to set style for div − .one {   width: 200px;   height: 100px;   background-color: #00FF00;   margin: 8px; } You can try to run the following code to implement the rounded-right class −ExampleLive Demo       Bootstrap Example                             .one {        width: 200px;        height: 100px;        background-color: #00FF00;        margin: 8px;     }         Rounded Corner   We have a rectangle with right rounded corner:  

To set the container for the Bootstrap card, you need to use the card-body class. It allows you to add contentThe following is the card-body class −   Body of the card And set the above inside the card class as shown in the following code snippet −   Body of the card. You can try to run the following code to implement the card-body class −ExampleLive Demo       Bootstrap Example                             Heading Three           Body of the card.      

The hidden.bs.tooltip event in Bootstrap fires when the tooltip is hidden −$("[data-toggle='tooltip']").on('hidden.bs.tooltip', function(){   alert('Tooltip is completely hidden now.'); });The data-toggle attribute is set before as shown below −   Timings You can try to run the following code to implement the hidden.bs.tooltip event −ExampleLive Demo       Bootstrap Example                             Event     Here tooltip will be displayed using the "Show" buttpn and can be hidden using the "Hide" button.     Timings ... Read More

Use the card-deck class in Bootstrap to form a grid of cards with equal width and height.Set the cards inside the following div −   Let us set the grid of cards now in the card-deck class −           Nothing new!   You can try to run the following code to implement the card-deck classExampleLive Demo       Bootstrap Example                               Demo Messages     Note: Resize the browser to check the effect.                             Nothing new!                                      Warning! Compile-time error!          Check again!                             We won!            

To add a hover effect, use the card-link class in Bootstrap.The following are the links using the card-link class −XAMPP (MySQL + PHP + Apache) WordPressAll of the above code is used inside the card-body class −   WordPress Installation   To work with WordPress, you need the following   XAMPP (MySQL + PHP + Apache)   WordPress You can try to run the following code to add a hover effect inside Bootstrap 4 card −ExampleLive Demo      Bootstrap Example                           Requirement - WordPress             WordPress Installation       To work with WordPress, you need the following       XAMPP (MySQL + PHP + Apache)       WordPress        

To align flex items, use the justify-content-* class.Use any of the following to align flex items at the start, end, around, and between.justify-content-start – Align Flex items at the start justify-content-end  - Align Flex items at the end justify-content-around – Align  flex items around on different screen sizes justify-content-between  - Alex flex items in between on difference screen sizesLet us see an example to set the flex items at the start −   RANK 1   RANK 2   RANK3 The following is the example to implement the justify-content-* class −ExampleLive Demo   Bootstrap Example                     RANK 1     RANK 2     RANK3         RANK 1     RANK 2     RANK 3         RANK 1     RANK 2     RANK 3  

To float an element to the left in Bootstrap, use the float-left class.Using the class, set the element on the left as shown below −   I am on the left. Set it on other elements like , , , etc −   Heading is on the left. You can try to run the following code to place an element on the left −ExampleLive Demo   Bootstrap Example                 Demo           I am on the left.       I am on the right.       I am on the left.       I am on the right.