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
Align single rows of items in the center with Bootstrap 4
Use the .align-items-center class in Bootstrap to align single rows of items in the center.To align in the center −Now add the flex items − Item 1 Item 2 Item 3 Item 4 You can try to run the following code to implement the align-items-center class in Bootstrap 4 −Example Bootstrap Example Align Flex Items on a single row at the center Item 1 Item 2 Item 3 Item 4
Read Morecard-title class in Bootstrap 4
Use the card-title class in Bootstrap 4 to set title for the card like the following example −The card title set above used the card-title class inside the card-body class. In addition, I have used the card-text class to set text inside the Bootstrap card as shown in the below give code snippet − Company Locations Singapore Malaysia Australia You can try to run the following code to implement the card-title class −Example Bootstrap Example Location Company Locations Singapore Malaysia Australia
Read MoreAdd a light grey background color to the Bootstrap 4 card
To add a light grey background color to a card in Bootstrap, use the bg-light contextual class with the card class.To set light grey background, add it to the class − Reduce size of images You can try to run the following code to add ligh grey background color to a card in Bootstrap 4 −Example Bootstrap Example Optimization Reduce size of images Clear Cache Use CDN
Read Morehide.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 More