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
hide.bs.popover Bootstrap event
The hide.bs.popover event fires when the popover is about to be hidden.Add a click button to hide the popver using the popver(“hide”) method −$(".btn-default").click(function(){ $("[data-toggle='popover']").popover('hide'); });After clicking the button, fire the popover event and generate an alert using the hide.bs.popver event in Bootstrap −$("[data-toggle='popover']").on(hide.bs.popover', function(){ alert('Popover is about to be hidden!'); });You can try to run the following code to implement the hide.bs.popover event −Example Bootstrap Example Awards ...
Read MoreSet Bootstrap badges in active states of pill
Place to active links to set Bootstrap badges in active states of pill.You can try to run the following code to achieve thisExample Bootstrap Example Active State in Pill Home 29 Profile Messages 72
Read MoreBootstrap .tab("show") method
Use the Bootstrap .tab(“show”) method to display the tabs.The following are the nav tabs − Home PHP C#.NET Ruby HTML5 Using a script and the tab(“show”) method, the above tabs are displayed as in the following code snippet −$(document).ready(function(){ $(".nav-tabs a").click(function(){ $(this).tab('show'); }); });Let us see an example to learn how to display tabs using the tab(“show”) method −Example Bootstrap Example Web Dev ...
Read MoreAlign a flex item at the baseline in Bootstrap 4
To align a flex item at the baseline in Bootstrap 4, use the .align-self-baseline class.Set the flex item at the baseline as shown below − A-one B-one C-one D-one You can try to run the following code to implement the align-self-baseline class in Bootstrap 4 −Example Bootstrap Example Align Specific Flex Item at the baseline A-one B-one C-one D-one
Read MoreBootstrap danger Contextual class
The Bootstrap danger contextual class indicates a danger action.You can try to run the following code to implement the .danger class −Example Bootstrap Table Subject Marks Student Programming 90 Amit Web Dev 92 Yuvraj Science 95 Sachin Economics 80 Tony
Read Moreshow.bs.tab event in Bootstrap
The show.bs.event fires when the tab is about to be displayed.Display the tab using the nav-tabs class − Home Java CSS Bootstrap jQuery After that, you need to use the show.bs.tab class to generate an alert after the tab is clicked, but just before it is displayed −$('.nav-tabs a').on('show.bs.tab', function(){ alert('New tab will be visible now!'); });You can try to run the following code to implement the show.bs.tab event −Example Bootstrap Example ...
Read MoreCreate a flexbox container on a specific screen size with Bootstrap 4
Create a flexbox container on a specific screen size, using the .d-*-flex class in Bootstrap.For different screen size, use it as “d-sm-flex”, “d-md-flex”, etc as shown below − Small Screen Medium Screen Large Screen Extra Large Screen Above, the flex-items are set for small, medium, large, and extra large screen size.Let us see an example of the class and its implementation −Example Bootstrap Example Flex Example d-flex d-sm-flex d-md-flex d-lg-flex d-xl-flex
Read MoreActive Nav States in Bootstrap
For active states, place to active links in Bootstrap −You can try to run the following code to achieve thisExample Bootstrap Example Active State in navigations 29 Home 9 Mail
Read Moretooltip("show") method in Bootstrap
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 −Example Bootstrap Example ...
Read MoreBootstrap 4 .flex-column in Bootstrap 4
Use the flex-column class to display flex items vertically − You need to now add the flex-item inside the flex-column class − First Second Let us see an example to learn how to implement the flex-column class in Bootstrap 4 −Example Bootstrap Example Flex Column First Second Third Fourth Fifth
Read More