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 ... 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   ... Read More

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     ... Read More

To create an inline flexbox container, you need to work with d-inline-flex class in Bootstrap 4 −Use the d-inline-flex class −And then set the flex items inside it as in the following code snippet −     One   Two   Three You can try to run the following code ... Read More

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   ... Read More

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 ... Read More

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 ... Read More

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   ... Read More

Use the bg-warning class with the card class in Bootstrap to set warning action on a Bootstrap card.Set warning messages like −Do not cross! High Voltage!Use the below code to style a Bootstrap card −   You are trespassing on private property! You can try to run the following code ... Read More

To align a flex item in the center on different screens in Bootstrap 4, use the .align-self-*-center class.Set it on different screens like small, medium, large, etc −Align a flex item in the center on small screen   A-one   B-one   C-one   D-one Align a flex item in ... Read More