Use align-top class to align an element with the top of the tallest element on the line.Align the element like this −   Top Alignment Let us see an example to implement the align-top class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Example     This is demo text     Demo Baseline     Top Alignment     Middle Alignment     Bottom Alignment  

Create a grid of cards with Bootstrap 4, using the card-columns class.Set the grid inside the class −   Include the card body inside the card container as in the following code snippet. I have added the card body under the card-class. The card-class is added inside the card-columns class −            Accessories       Let us see an example to create a grid of cards in Bootstrap −ExampleLive Demo       Bootstrap Example                             Products                             Accessories                                       Furnitures                    

The btn-outline-primary class is used in Bootstrap 4 to set blue outlined button.Add blue outline to the button using the btn-outline-primary class as shown in the following code snippet −   Result You can try to run the following code to implement the btn-outline-primary class −ExampleLive Demo       Bootstrap Example                             Result     Click below to get the result:     Result  

To set dark grey outlined border to a button, use the btn-outline-dark class.Include the brn-outline-dark class as if you add any other class to an element. Here, we have the button element since we want a dark grey outline for our button:   Dark gray outline Let us see an eample to implement the btn-outline-dark class in Bootstrap −ExampleLive Demo       Bootstrap Example                             Bootstrap 4     Learning  btn-outline-dark class usage:     Dark gray outline  

Use the .align-self-*-start class in Bootstrap 4 to align a flex item from the start on different screens.To align a flex item on different screens −Small Screen   Item 1   Item 2   Item 3   Item 4 Large Screen   Item 1   Item 2   Item 3   Item 4 Let us see the complete example to align a flex item from the start on different screens −ExampleLive Demo       Bootstrap Example                         Align Specific Flex Item from the start       Item 1     Item 2     Item 3     Item 4     Small Screen Size         Item 1     Item 2     Item 3     Item 4     Medium Screen Size       Item 1     Item 2     Item 3     Item 4     Large Screen Size       Item 1     Item 2     Item 3     Item 4  

The hide.bs.tooltip event in Bootstrap fires when the tooltip is about to be hidden.Click the hide button first −$(".btn-default").click(function(){   $("[data-toggle='tooltip']").tooltip('hide'); });On clicking above the hide.bs.tooltip event fires and an alert generates −$("[data-toggle='tooltip']").on('hide.bs.tooltip', function(){   alert('Tooltip will hide now.'); });You can try to run the following code to implement the hide.bs.tooltip event −ExampleLive Demo       Bootstrap Example                             Event     Here tooltip will be displayed using the "Show" buttpn and can be hidden ... Read More

Use .align-content-end class to align gathered items at the end in Bootstrap 4.To set the items at the end −

To set an outline on a button that indicates positive action, you need to use the btn-outline-success class in Bootstrap.Here is how you can set it:   More (Green Outline) You can try to run the following code to implement the btn-outline-success class −ExampleLive Demo       Bootstrap Example                         Python   The following are the Python Technologies :       Jython     WxPython     For more, click below:   More (Green Outline)

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 implement the bg-primary class in Bootstarp 4, you can try to run the following code −ExampleLive Demo       Bootstrap Example                             Books           History Books               Medical Books      

The shown.bs.tooltip event in Bootstrap fires when the tooltip is completely displayed:$("[data-toggle='tooltip']").on('shown.bs.tooltip', function(){   alert('Tooltip is completely visible now.'); });The data-toggle attribute above is set on a link, wherein the popup will originate on button click as shown in the following code snippet:   Timings You can try to run the following code to implement the shown.bs.tooltip event −ExampleLive Demo       Bootstrap Example                             Event     Here tooltip will be displayed using the ... Read More