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
Articles by Amit Diwan
Page 5 of 8
Stretch single rows of items on different screens in Bootstrap 4
Use .align-items-*-stretch class to stretch single rows of items on different screens in Bootstrap 4.Stretch single rows if items on specific screen sizes as shown below:Small Screen Size Medium Screen Size Large Screen Size Extra Large Screen Size Let us implement the align-items-*-stretch class in Bootstrap 4 −Example Bootstrap Example Align Flex Items on a single row (stretch) Item 1 Item 2 Item 3 Item 4 Small Screen Size Item 1 Item 2 Item 3 Item 4 Medium Screen Size Item 1 Item 2 Item 3 Item 4 Large Screen Size Item 1 Item 2 Item 3 Item 4 Extra Large Screen Size Item 1 Item 2 Item 3 Item 4
Read MoreBootstrap 4 Button .btn-outline-danger class
To set an outline on a button that indicates danger, you need to use the btn-outline-danger class in Bootstrap.Set the outline in the element − Danger Ahead You can try to run the following code to implement the btn-outline-danger class −Example Bootstrap Example Danger Button Danger Ahead
Read MoreContainer to create a grid of Bootstrap 4 cards
Create a grid of cards with Bootstrap 4, using the card-columns class.Set the grid inside the class − Include the card body inside the card container as in the following code snippet. I have added the card body under the card-class. The card-class is added inside the card-columns class − Accessories Let us see an example to create a grid of cards in Bootstrap −Example Bootstrap Example Products Accessories Furnitures
Read MoreAlign an element with the top of the tallest element on the line in Bootstrap 4
Use align-top class to align an element with the top of the tallest element on the line.Align the element like this − Top Alignment Let us see an example to implement the align-top class in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Middle Alignment Bottom Alignment
Read MoreAlign an element with the top of the parent element's font in Bootstrap 4
Use align-text-top class to align an element with the top of the parent element's font.Set the align-text-top class as − Top Text You can try to run the following code to implement the align-text class in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Top Text Bottom Text
Read MoreBootstrap .tooltip("hide") method
Use the tooltip(“hide”) method in Bootstrap to hide the tooltip. The tooltip hides on button click as shown below −$(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('hide'); });Above the data-toggle attribute can be seen which we set before on element. Now the toggle will generate from the link when the button is clicked − Tooltip will be visible here You can try to run the following code to implement the tooltip(“hide”) method −Example Bootstrap Example ...
Read MoreStyle Bootstrap 4 cards with bg-danger class
To color Bootstrap cards, we use the contextual classes.For danger action, use the bg-danger contextual class with the card class − Danger! High Voltage! You can try to run the following code to implement the card-danger class −Example Bootstrap Example Messages How you doing? Danger! High Voltage!
Read MoreBootstrap 4 .card-img-overlay class
Use the card-img-overlay class to turn an image into a Bootstrap 4 card background and set the image using the element and the card-img-top class −After that, use the card-img-overlay class − Avro Tutorial for Apache Avro Learn You can try to run the following code to implement the card-img-overlay class in Bootstrap 4 −Example Bootstrap Example Apach - Tool for Hadoop Avro Tutorial for Apache Avro Learn
Read MoreAdd right rounded corners to an element in Bootstrap
Use the rounded-right class in Bootstrap 4 to add right rounded corners to an element.Just set the class to be rounded-right to an element like below −Here, another class “one” is also set to style the element − .one { width: 250px; height: 120px; background-color: #265C80; margin: 20px; } Let us see an example to set right rounded corners to a rectangle −Example Bootstrap Example .one { width: 250px; height: 120px; background-color: #265C80; margin: 20px; } Rounded Corner We have a rectangle with right rounded corner:
Read MoreContainer to create a grid of Bootstrap 4 cards of equal height and width
Set a container of cards, using the card-deck class.Work it inside the following div that would be of equal width and height − You can try to run the following code to implement the card-deck class −Example Bootstrap Example Demo Messages Note: Resize the browser to check the effect. Nothing new! Warning! Compile-time error! Check again! We won!
Read More