Use the bg-primary class in Bootstrap 4, to add important stuff to a card and set blue background color.Style the Bootstrap 4 card as in the following code snippet −   Medical Books I have set the body of the card in the card-body class −   Medical Books To ... Read More

To align single rows of items at the end, use the .align-items-end class in Bootstrap 4.Align using the align-items-end class −Now add the flex items to align single rows of items −   Product 1   Product 2   Product 3 Let us see an example to align single rows ... Read More

The shown.bs.popover event fires when the popover is completely visible.Firstly, display the popover on button click using the following code −$(".btn-default").click(function(){   $("[data-toggle='popover']").popover('show'); });After that, fire the popover shown.bs.popover event and generate alert −$("[data-toggle='popover']").on('shown.bs.popover', function(){   alert('Popover is completely visible!'); });You can try to run the following code to implement ... Read More

To toggle the popover on button click, use the popver(“toggle”) method.Set the popover toggle as −$(document).ready(function(){   $(".btn-default").click(function(){     $("[data-toggle='popover']").popover('toggle');   }); });On button click, the popover generates −   (Course) Toggle Popover The popver, on button click, generates the popover on a link −   Learn The following ... Read More

Use the .align-self-*-start class to align a flex item at the baseline on different screens in Bootstrap 4.On different screen sizes, set the baseline as −Small Screen   A-one   B-one   C-one   D-one Medium Screen   A-one   B-one   C-one   D-one Large Screen   A-one   ... Read More

Use the .align-items-*-start class in Bootstrap 4 to align single rows of items from the start on different screens.For different screen size, use the class as −Align Single Rows of Items on Small Screen   Product 1   Product 2   Product 3   Product 4 Align Single Rows of ... Read More

The .modal(“hide”) method hides the modal on button click.Firstly, generate the modal and display it −$("#newModal").modal("show");After that, use the modal(“hide”) method on a button to hide the modal on button click −$("#button1").click(function(){   $("#newModal").modal("hide"); });Let us see an example of the modal(‘hide”) method wherein we are hiding a modal which ... Read More

Align single rows of items at the baseline in Bootstrap 4, use the .align-items-baseline class.To align at the baseline:

The hide.bs.modal event in Bootstrap fires when the modal is about to be hidden.The following button hides the modal −   Click to hide Just after clicking the hide button, the hide.bs.modal event fires and before the modal is hidden.  Here is the script for the hide.bs.modal event:$("#newModal").on('hide.bs.modal', function () ... Read More

To create a rounded circle with Bootstrap, use the rounded-circle class.Add the rounded-circle class in the Above, we also have a test class, which is a CSS class to style the circle −.test {   width: 270px;   height: 320px;   background-color: yellow; }You can try to run the ... Read More