Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Amit Diwan
Page 4 of 8
Place an element in the middle of the parent element in Bootstrap 4
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 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Middle Alignment Bottom Alignment
Read MoreBootstrap 4 .flex-fill class
Use the flex-fill class to set the flex items to be equal width in Bootstrap 4.Set the flex item inside the set as flex − Example 1 Example 2 Example 3 Example 4 The following is an example displaying the implementation of flex-fill class −Example Bootstrap Example With flex-fill Example 1 Example 2 Example 3 Example 4 Without .flex-fill: Example 1 Example 2 Example 3 Example 4
Read MoreBootstrap hide.bs.tab event
The hide.bs.tab fires when the tab is about to be hidden in Bootstrap.Fire the hide.bs.tab and generate the alert before the modal is hidden −$('.nav-tabs a').on('hide.bs.tab', function(e){ alert('Previous tab will hide now!'); });The first tab is the active tab and fade in property is also set − Home This is demo text! You can try to run the following code to implement the hide.bs.tab event −Example Bootstrap Example Web ...
Read MoreStyle Bootstrap 4 card with bg-primary class
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 −Example Bootstrap Example Books History Books Medical Books
Read MoreBootstrap .popover("destroy") method
Use the popver(“detroy”) to destroy the popover.It hides the popover −popover('destroy');The method is used to destroy the popover −$(".btn-default").click(function(){ $("[data-toggle='popover']").popover('destroy'); });You can try to run the following code to implement the popver(“destroy”) method −Example Bootstrap Example Examination Here's the result: Result Refresh $(document).ready(function(){ $(".btn-default").click(function(){ $("[data-toggle='popover']").popover('toggle'); }); $(".btn-danger").click(function(){ $("[data-toggle='popover']").popover('destroy'); }); });
Read MoreBootstrap 4 .border-dark class
To set a dark border to an element in Bootstrap, use the border-dark class.To work with it is an easy task. Just use the class name as the element class − Dark Border Above, the "test" class can also be seen. This is useful to set style for the element − .test { width: 150px; height: 150px; margin: 35px; } You can try to run the following code to implement the border-dark class in Bootstrap 4 −Example Bootstrap Example .test { width: 150px; height: 150px; margin: 35px; } Rectangle with dark border: Dark Border
Read MoreBootstrap .tooltip("destroy") method
Use the tooltip(“destroy”) method in Bootstrap to detroy the tooltip −$(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('destroy'); });The following example has two buttons, one for “Show Tooltip” and another for “Destroy Tooltip” −Show Tooltip$(".btn-primary").click(function(){ $("[data-toggle='tooltip']").tooltip('show'); });Destroy Tooltip$(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('destroy'); });Here is the complete code to implement the tooltip(“destroy”) method −Example Bootstrap Example Demo Tooltip will be visible here Show Tooltip Destroy Tooltip $(document).ready(function(){ $(".btn-primary").click(function(){ $("[data-toggle='tooltip']").tooltip('show'); }); $(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('destroy'); }); });
Read MoreAlign a flex item from the start with Bootstrap 4
Use the .align-self-start class in Bootstrap 4 to align a flex item from the start.To align flex item from the start, you need to set the class in that particular flex item − Item 3 The above is set inside the flex class as shown below − Item 1 Item 2 Item 3 Item 4 You can try to run the following code to implement the align-self-start class −Example Bootstrap Example Align Specific Flex Item from the start Item 1 Item 2 Item 3 Item 4
Read MoreBootstrap show.bs.tooltip event
The show.bs.tooltip event in Bootstrap fires when the tooltip is about to be displayed −$("[data-toggle='tooltip']").on('show.bs.tooltip', function(){ alert('Tooltip will be visible now.'); });The "data-toggle" attribute is set before as an tag attribute, since the Bootstrap generates from there itself − Timings You can try to run the following code to implement the show.bs.tooltip event −Example Bootstrap Example Event Here tooltip will be displayed using the "Show" buttpn and ...
Read MoreAlign gathered items in the center in Bootstrap 4
Use the .align-content-center class to align gathered items in the center in Bootstrap 4.Set the align-content-center class as shown below −After that, add the flex items − One Two Three Let us see an example to implement the align-content-center class −Example Bootstrap Example Example One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen
Read More