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
Bootstrap Articles
Page 33 of 49
Align an element with the lowest element on the line in Bootstrap 4
Use align-bottom class in Bootstrap 4 to align an element with the lowest element on the line.Set the class as −Now add content − Bottom Alignment You can try to run the following code to align an element with the lowest element on the line in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Middle Alignment Bottom Alignment
Read MoreAlign 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 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 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 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 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 MoreBootstrap 4 .d-inline-flex class
Use the d-inline-flex class in Bootstrap to create an inline flexbox container −Now add the flex-items inside it as in the following code snippet − One Two Three You can try to run the following code to implement the .d-inline class −Example Bootstrap Example Understanding Inline Flex One Two Three
Read MoreBootstrap Event when the modal is fully shown
The shown.bs.modal event in Bootstrap fires when the modal is completely displayed.The modal is displayed using the modal(show) method −$("#button1").click(function(){ $("#newModal").modal("show"); });Fire shown.bs.modal event and generate the alert as shown below −$("#newModal").on('shown.bs.modal', function () { alert('The modal is displayed completely!'); });You can try to run the following code to implement the shown.bs.modal event in Bootstrap −Example Bootstrap Example Entrance Exams The following is the result of the entrance ...
Read MoreDisplay flex items vertically and reversed on different screen sizes in Bootstrap 4
Use the column-reverse class on various screen size to display flex item vertically and reversed.For example: On medium screen size, use md-column-reverse −The following is the difference between column and column reverse −The following is an example to display flex items vertically and reversed on different screen sizes −Example Bootstrap Example Example Flex on different screen size (Column) First Second Third Flex on different screen size (Medium - Column Reverse) First Second Third Flex on different screen size (Large - Column Reverse) First Second Third
Read MoreBootstrap hidden.bs.tab event
The hidden.bs.tab event fires when the tab is completely hidden in Bootstrap.Firsty, show the modal using show method as in the following code snippet −$(“.nav-tabs a”).click(function(){ $(this).tab('show'); });The hidden.bs.tab event fires and an alert generates after the tab hides −$(‘.nav-tabs a’).on(‘hidden.bs.tab’, function() { alert('Previous Tab is hidden now!'); });You can try to run the following code to implement the hidden.bs.tab event −Example Bootstrap Example Web Dev ...
Read More