CSS Framework Articles - Page 16 of 45

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

Use the border-danger class to set a red border to an element.Set the border-danger class to an element as if we include any other class −   Red Border Above, we have also set another class “new”, to style the element − .new {   width: 120px;   height: 120px;   margin: 20px; } You can try to run the following code to implement the border-danger class −ExampleLive Demo       Bootstrap Example                             .new {       width: 120px;       height: 120px;       margin: 20px;      }         Rectangle with red border:   Red Border

Use align-middle class to place an element in the middle of the parent element.To place an element in the middle −   Middle Alignment Let us seen an example to implement the align-middle class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                                   Example       This is demo text       Demo Baseline       Top Alignment       Middle Alignment       Bottom Alignment    

Use the btn-outline-success class in Bootstrap to set green outline to a button.Green button outline states success and you can set a button like this −   Result Above I have set the class on element just like we set a class on any other element in HTML or Bootstrap.Here is an example to learn how to work with the btn-outline-success class in Bootstrap −ExampleLive Demo       Bootstrap Example                         Result   The following are the subjects:       Maths     Digital Electronics     For result, click below:   Result

To set less important stuff in Bootstrap, use the btn-outline-secondary class.The outline is applied on a button and a green color is applied using the same class −   Tools (Secondary Outline) Above, I have set the btn-outline-secondary class as any normal class set on any element, which is button here.You can try to run the following code to learn how to set grey outline Bootstrap Button −ExampleLive Demo       Bootstrap Example                         Web Tools   The following are the Tools:       JSON Editor     XML Editor     For more, click below:   Tools (Secondary Outline)

Use the tooltip(“show”) method in Bootstrap to display the tooltip. As shown below that the tooltip is visible on button click:$(document).ready(function(){   $(".btn-primary").click(function(){     $("[data-toggle='tooltip']").tooltip('show');   }); });The tooltip would be visible on a link wherein I have set the data-toggle attribute and the link text as shown in the following code snippet −   On clicking the below button, the tooltip would be visible. You can try to run the following code to implement the tooltip(“show”) method −ExampleLive Demo       Bootstrap Example                 ... Read More