Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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 −ExampleLive Demo Bootstrap Example Information - Event Bring your Laptop for the BootCamp
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 −ExampleLive Demo Bootstrap Example Vehicle Car Bike Truck Car Bike Truck Car Bike Truck Car Bike Truck
Use the .justify-content-*-end class to align flex items in the end on different screen sizes like this −For small screen size, use −justify-content-sm-endFor medium screen size, use −justify-content-md-endFor large screen size, use −justify-content-lg-endLet us see how to align flex items horizontally on small, medium and large screen sizes −ExampleLive Demo Bootstrap Example Form of Tea Black Tea Green Tea Indian Tea Black Tea Green Tea Indian Tea Black Tea Green Tea Indian Tea
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 −ExampleLive Demo Bootstrap Example .one { width: 200px; height: 100px; background-color: #FFFF00; margin: 8px; } Rounded Corner We have three rectangles with left rounded corner:
To create an inline flexbox container, use the d-inline-flex class in Bootstrap.Use the d-*-inline-flex class in Bootstrap to set the same inline flexbox container on specific screen size −Small Screen Size Small Medium Screen Size Medium Large Screen Size Large Let us see an example to learn how to create inline flexbox container on a specific screen size −ExampleLive Demo Bootstrap Example Working with Inline Flex Resize the browser window to check the effect d-flex d-sm-flex d-md-flex d-lg-flex d-xl-flex
Use the rounded-top class in Bootstarp 4 to set top rounded corners to an element.Using the class, I have set two rectangles using the same class − A new class is also set for div, to style it, .new { width: 60px; height: 60px; background-color: #26CF12; margin: 20px; } You can try to run the following code to implement the rounded-top class −ExampleLive Demo Bootstrap Example .new { width: 60px; height: 60px; background-color: #26CF12; margin: 20px; } Rounded Corner We have two rectangles with top rounded corner:
The HTML DOM Submit formAction property is used for setting or getting the formaction attribute value of the form. The formaction property specifies to url where the data is to be sent after clicking on the submit button. The formAction attribute value overrides the action attribute value associated with the element.SyntaxFollowing is the syntax for −Setting the formAction property −submitObject.formAction = URLHere, the URL can be an absolute url or a relative one.ExampleLet us look at an example for the Submit formAction property − Submit formAction Property UserName: Location: Change ... Read More
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 − ExampleLive Demo Bootstrap Example E-commerce Technologies Drupal Commerce WooCommerce Prestashop Shopify Add title here Add content here
To style navigation pills inside the card header in Bootstrap 4, use the card-header-pills class as shown below & minus;Set the navigation pills inside the header class in Bootstrap − Clothing Electronics Mobile Accessories You can try to run the following code to implement the card-header-pills class in Bootstrap 4 −ExampleLive Demo Bootstrap Example Products Clothing Electronics Mobile Accessories Clothing We have Men and Women clothing line...
To set positive action to a card in Bootstrap, use the bg-success class with the card classSet positive action and use “card bg-success” −Now add the body of the card using the card-body class − India won by 7 wickets You can try to run the following code to implement the card-success class −ExampleLive Demo Bootstrap Example Result Result of the first two matches between India and Australia: India won by 10 runs India won by 7 wickets