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
CSS Framework Articles
Page 30 of 45
Bootstrap .modal("hide") method
The .modal(“hide”) method in Bootstrap hides the modal.Hide the Bootstrap modal on the click of a button −$("#button1").click(function(){ $("#newModal").modal("hide"); });The modal is shown using the modal(“show”) method −$("#newModal").modal("show");Let us see an example of the modal(‘hide”) method −Example Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; font-size:15px; position: absolute; margin: ...
Read MoreBootstrap 4 .d-*-flex class
Use the .d-*-flex class in Bootstrap to set a flexbox container on a screen size as shown below −d-flex d-sm-flex d-md-flex d-lg-flexAbove the flex is set for different screen sizes, for example,d-sm-flex = Flex for Small Screen Sized-md-flex = Flex for Medium Screen Sized-lg-flex = Flex for Large Screen Sized-xl-flex = Flex for Extra Large Screen SizeLet us see an example of the class −Example Bootstrap Example Understanding Flex d-flex Small Screen Size Medium Screen Size Large Screen Size Extra Large Screen Size
Read MoreStretch gathered items in Bootstrap 4
To stretch gathered items, use the .align-content-stretch class in Bootstrap 4. Use the align-content-stretch class as −
Read MoreAlign 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 More