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 737 of 801
Bootstrap 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 MoreRemove borders from an element in Bootstrap
Use the border-0 class in Bootstrap 4 to remove all borders from an element in Bootstrap 4 − no border Above, we have the div class to no-border class and this allow us to remove the borders from the element.Let us see an example to implement the border-0 class in Bootstrap −Example Bootstrap Example .mystyle { width: 120px; height: 100px; margin: 10px; background: maroon; } Rectangle no border
Read MoreBootstrap .modal("show") method
The modal(“show”) method opens a modal like below −The modal is displayed using the modal(“show”) method as shown below −$("#newModal").modal("show");Let us see an example of modal(“show”) method −Example Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; font-size: 15px; position: absolute; margin: 0 auto; } ...
Read MoreSet a light grey border to an element in Bootstrap 4
To set a light grey border to an element, use the border border-light class in Bootstrap 4.Adding a light border is easy as shown below − This element has light border You can try to run the following code to implement the border-light-class −Example Bootstrap Example .demo { width: 150px; height: 220px; margin: 15px; } Demo This element has light border
Read MoreBootstrap 4 .border-primary class
Add a blue border to an element in Bootstrap 4 using the border-primary class as shown below:Set the class as − Blue Border You can try to run the following code to implement the border-primary class −Example Bootstrap Example .demo { width: 250px; height: 170px; margin: 10px; } Demo Heading Blue Border
Read MoreBootstrap 4 .border-right-0 class
Use the border-right-0 class in Bootstrap to remove the right border.To remove the right border − Rectangle is missing the right border. Style the div as −.mystyle { width: 350px; height: 170px; margin: 10px; }You can try to run the following code to implement the border-right- 0 class −Example Bootstrap Example .mystyle { width: 350px; height: 170px; margin: 10px; } Heading Two Rectangle is missing the right border.
Read More