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
CSS Framework Articles
Page 37 of 45
Align flex items around on different screen sizes in Bootstrap
To align flex items around on different screen sizes, use the justify-content-*-around class.You can achieve the following result that justifies content on small and medium screen sizes −To implement the justify-content-*-around class in Bootstrap −Example Bootstrap Example Default ANS 1 ANS 2 ANS 3 Small Screen Size ANS 1 ANS 2 ANS 3 Medium Screen Size ANS 1 ANS 2 ANS 3 Large Screen Size ANS 1 ANS 2 ANS 3
Read MoreStyle Bootstrap card with bg-info class
Use the bg-info class with the card-class in Bootstrap 4 to add information in a card −Now include the card-body class in it − Bring your Laptop for the BootCamp Let us see an example to learn how to implement Bootstrap 4 bg-info class with the card class −Example Bootstrap Example Information - Event Bring your Laptop for the BootCamp
Read MoreBootstrap 4 .justify-content-*-center class
Use the justify-content-*-center class in Bootstrap 4 to center content on different screen sizes.For different screen sizes −justify-content-sm-center: Small Screen Size justify-content-md-center: Medium Screen Size justify-content-lg-center: Large Screen Size justify-content-xl-center: Extra Large Screen SizeLet us see how to implement the justify-content-*-center class −Example Bootstrap Example Vehicle Car Bike Truck Car Bike Truck Car Bike Truck Car Bike Truck
Read MoreAdd left rounded corners to an element in Bootstrap
To add left rounded corners to an element like , then use the rounded-left class in Bootstarp 4.To set rounded left corners −You can try to run the following code to implement rounded-left class −Example Bootstrap Example .one { width: 200px; height: 100px; background-color: #FFFF00; margin: 8px; } Rounded Corner We have three rectangles with left rounded corner:
Read MoreBootstrap 4 .justify-content-*-start class
Use the justify-content-start class in Bootstrap to justify content in the beginning.The justify-content-*-start class is used in Bootstrap to justify content in the beginning on different screen sizes like the following on small, medium, and large screen sizes −You can try to run the following code to implement the justify-content-*-start class −Example Bootstrap Example Entertainment Bollywood Tollywood Hollywood Bollywood Tollywood Hollywood Bollywood Tollywood Hollywood
Read MoreBootstrap 4 .card-header-tabs class
Use the card-header-tabs in Bootstrap to style navigation links in card header − Drupal Commerce WooCommerce The header tabs are set on Unordered List using nav-tabs and card-header-tabs class as shown above −Let us see an example to learn how to create Bootstrap 4 card header − Example Bootstrap Example E-commerce Technologies Drupal Commerce WooCommerce Prestashop Shopify Add title here Add content here
Read MoreAlign flex items in the start on different screen sizes in Bootstrap
To align flex items on small, medium, large and extra large screen size, use the justify-content-*-start class.Let us see first for small screen size − Interface Packages Multithreading In the same way, implement it for medium, large and extra large screen size like the following −justify-content-md-start: Medium Screen size justify-content-lg-start: Large Screen size justify-content-xl-start: Extra Large Screen SizeYou can try to run the following code to align flex items in the start on different screen sizes −Example Bootstrap Example Java Topics Interface Packages Multithreading Interface Packages Multithreading Interface Packages Multithreading
Read MoreAdd top rounded corners to an element in Bootstrap 4
To add top rounded corners to an element, use the rounded-top class in Bootstrap 4.I have taken div as the element −Let us learn how to add top rounded corners to an element −Example Bootstrap Example .new { width: 80px; height: 80px; background-color: #EE6D1E; margin: 20px; } Rounded Corner We have a rectangle with top rounded corner:
Read MoreSet a border to an element in Bootstrap to indicate information
To set a border indicating information, use the border-info class.To implement it − Information Let us see an example to implement the border-info class −Example Bootstrap Example .one { width: 200px; height: 240px; margin: 40px; } Rectangle with a border indicating information: Information
Read MoreBootstrap 4 .border-light class
Use the border-light class in Bootstrap 4, to set a light gray border to an element as shown below light border Style for the demo class is for the element −.demo { width: 150px; height: 220px; margin: 15px; }Learn how to work with the border-light class in Bootstrap −Example Bootstrap Example .demo { width: 150px; height: 220px; margin: 15px; } Bootstrap 4 light border
Read More