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 on Trending Technologies
Technical articles with clear explanations and examples
Bootstrap 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 MoreAdd a light-blue label (set info) with Bootstrap
Use .label-info class in Bootstrap to add light-blue label.You can try to run the following code to implement the .label-info classExample Bootstrap Example Info label Information
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 MoreBootstrap thumbnail class
The role of .thumbnail class in Bootstrap is used to create a thumbnail for images −Example Bootstrap Example
Read Moreshown.bs.tooltip event in Bootstrap
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 −Example Bootstrap Example Event Here tooltip will be displayed using the "Show" ...
Read MoreFlex items into equal widths on different screens with Bootstrap 4
To set flex items to equal width on different screens, use the the flex-*-fill class.For small width screen, use flex-sm-fill − A For large width screen, use flex-lg-fill − A The following is an example to give euqla width to flex items on different screens −Example Bootstrap Example Flex (Small Width) A B C Flex (Medium Width) A B C Flex (Large Width) A B C
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 MoreAdd HTML headings into Bootstrap thumbnails
With Bootstrap, you can easily add heading to thumbnails.You can try to run the following code to add HTML headings −Example Bootstrap Example Thumbnail Heading
Read MoreBootstrap 4 .flex-grow-0|1 class
Use the .flex-grow-0|1 class in Bootstrap to allow a singly lex item to take up rest of the space in the flex.For example, the following takes rest of the space in the right −The above is set by adding flex-grow class for the last flex-item − P Q R Let us see the following example to implement flex-grow-0|1 class −Example Bootstrap Example P Q R P Q R
Read More