To add a light grey background color to a card in Bootstrap, use the bg-light contextual class with the card class.To set light grey background, add it to the class −   Reduce size of images You can try to run the following code to add ligh grey background ... Read More

To align a flex item at the baseline in Bootstrap 4, use the .align-self-baseline class.Set the flex item at the baseline as shown below −   A-one   B-one   C-one   D-one You can try to run the following code to implement the align-self-baseline class in Bootstrap 4 −ExampleLive ... Read More

Use the .d-*-flex class in Bootstrap to set a flexbox container on a screen size as shown below −d-flex d-sm-flex d-md-flex d-lg-flexAbove the flex is set for different screen sizes, for example, d-sm-flex = Flex for Small Screen Sized-md-flex = Flex for Medium Screen Sized-lg-flex = Flex for Large Screen Sized-xl-flex = ... Read More

To align single rows of items at the end on different screens in Bootstrap 4, use the .align-items-*-end class.Align on different screen sizes −Medium Screen Size   Product 1   Product 2   Product 3   Product 4 Large Screen Size   Product 1   Product 2   Product 3 ... Read More

To align items in the center on different screen sizes, use the justify-content-*-center class.The aligned flex items would be like the following for small screen size −   GOLF   CRICKET   SQUASH The aligned flex items would be like the following for medium screen size −   GOLF   ... Read More

To set an outline on a button that indicates information, you need to use the btn-outline-info class in Bootstrap.Include the button element and set the btn-outline-info class −   More Info You can try to run the following code to implement the btn-outline-info class −ExampleLive Demo     ... Read More

The hidden.bs.modal event in Bootstrap fires when the modal is completely hidden.Hide the modal on button click −$("#button1").click(function(){   $("#newModal").modal("hide"); });After you will hide it, use the hidden.bs.modal Bootstrap event to generate an alert before the modal completely hides −$("#newModal").on('hidden.bs.modal', function () {   alert('The modal is completely hidden now!'); ... Read More

To show flex items vertically on different screen sizes, use the flex-*- column class. For small, medium and large screen sizes, use it as −For Small screen size −For Medium screen size −For Large screen size −Let us see an example to learn how to set flex items vertically on ... Read More

If you want to set content as a Bootstrap modal, then use the .modal(options) method.On button click, the modal generates as in the following script.$(document).ready(function(){   $("#button1").click(function(){     $("#newModal1").modal({backdrop: true});   }); });Above, I have set options as “backdrop:true”. Another option, we can set is “backdrop: true” −backdrop: true = ... Read More

If you want to set a dark border to an element, use the border-dark class.Spot the difference between a normal border and dark border −To add a dark border, you need to simply add it like any other class in div as shown below −   Dark Border Above, the ... Read More