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
Web Development Articles
Page 729 of 801
Bootstrap 4 card styled with bg-secondary class
Add less important stuff, using the card class with the bg-secondary contextual class in Bootstrap.This class adds a gray background −Inside that, add the card body − English You can try to run the following code to implement the card class with bg-secondary class in Bootstrap −Example Bootstrap Example Languages English French Chinese Russian
Read MoreBootstrap 4 .border-left-0 class
Use the border-left-0 class to remove the left border of an element.Remove the left border of a using the class inside the − Removing left border The “one” class is also set in the class to style it − .one { width: 220px; height: 220px; margin: 50px; } You can try to run the following code to work with the border-left-0 class −Example Bootstrap Example .one { width: 220px; height: 220px; margin: 50px; } Bootstrap 4 Removing left border
Read MoreBootstrap .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 More