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 page-header class
Page header is used to add appropriate spacing around the headings on a page.To use a page header, wrap your heading in a with a class of .page-header −Example Bootstrap Example Header Subtext for header Demo text! Demo text! Demo text! Demo text! Demo text! Demo text! Demo text! Demo text! Demo text!
Read MorePlace 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 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 More