Bootstrap Articles - Page 9 of 63

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 set negative action on a Bootstrap card, use the bg-warning class with the card class as shown in the below example −   Over 20 students failed the final-year exam. Let us see an example to set negative action to a card in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Result           Over 20 students failed the final-year exam.      

Use the card-subtitle class to set subtitle for the card.The card-subtitle class is used as shown below −SportsHere, I have set the subtitle as “Indoor” for an example. The subtitle class comes after the card-title Bootstrap class −   Sports   Indoor   Squash, Dart, Chess Let us see the example to work with card-subtitle class in Bootstrap 4 −ExampleLive Demo   Bootstrap Example                 Indoor and Outdoor Sports                   Sports         Indoor         Squash, Dart, Chess                       Sports         Outdoor         Cricket, Football, Hockey                

Use the btn-outline-seondary class to set a grey outline in Bootstrap 4 to show less important information.The following is the code to set Bootstrap button to add grey outline −   More Let us see how to implement the btn-outline-secondary class −ExampleLive Demo       Bootstrap Example                         Tools   The following are the tools:       Online Compiler     Image Editor     Image Optimizer     Whiteboard     For more tools, click below:   More

To set less important stuff in Bootstrap, use the card class with the bg-secondary contextual class as shown below −Set the card body as well using the card-body class −   Fitness Trackers Let us see how to set a card with less important content −ExampleLive Demo       Bootstrap Example                             Fitness Products           Fitness Trackers               Heart Rate Monitors      

Use the float-*-right class in Bootstrap to float an element to the right. Different screen size includes setting the float for small, medium, large and extra large sizes.Let us see how to float and element to the right on small and medium size screen size −Small Screen Size   This text is on the right (on small screen). Medium Screen Size   This text is on the right (on medium screen). Let us see how to place an element on the right on different screens −ExampleLive Demo   Bootstrap Example         ... Read More