Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To set an element to have rounded corner, use the rounded-bottom class in Bootstrap 4.Set the rounded-bottom class −In the above , I have also set another class for styling the element −.demo { width: 100px; height: 120px; margin: 10px; background-color: orange; }You can try to run the following code to implement the rounded-bottom class −ExampleLive Demo Bootstrap Example .demo { width: 100px; height: 120px; margin: 10px; background-color: orange; } Rectangles We have two rectangles with rounded corners (bottom):
Use the align-baseline class in Bootstrap 4 to align an element with the baseline of the parent elment.Set the align-baselinec class like the following code snippet −Now add the content inside it − Demo Baseline You can try to run the following code to align an element with the parent’s baseline −ExampleLive Demo Bootstrap Example Example This is demo text Demo Baseline
Use .align-items-*-center class in Bootstrap 4 to align single rows of items in the center on different screens .Let us see how to align flex items on a single row in the center of small, medium, and large screen sizes −Align on Small Screen Size in the center Item 1 Item 2 Item 3 Item 4 Align on Medium Screen Size in the center Item 1 Item 2 Item 3 Item 4 Align on Large Screen Size in the center Item 1 Item 2 Item 3 ... Read More
Prior to Java 2, Java provided ad hoc classes such as Dictionary, Vector, Stack, and Properties to store and manipulate groups of objects. Although these classes were quite useful, they lacked a central, unifying theme. Thus, the way that you used Vector was different from the way that you used Properties.The collections framework was designed to meet several goals, such as −The framework had to be high-performance. The implementations for the fundamental collections (dynamic arrays, linked lists, trees, and hash tables) were to be highly efficient.The framework had to allow different types of collections to work in a similar manner ... Read More
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 −ExampleLive Demo Bootstrap Example .demo { width: 250px; height: 170px; margin: 10px; } Demo Heading Blue Border
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 −ExampleLive Demo Bootstrap Example .mystyle { width: 350px; height: 170px; margin: 10px; } Heading Two Rectangle is missing the right border.
The hide.bs.modal event in Bootstrap fires when the modal is about to be hidden.Firstly, hide the Bootstrap modal on button click −$("#button1").click(function(){ $("#newModal").modal("hide"); });Now, use the hide.bs.modal class and generate the alert when the modal is about to hide on button click −$("#newModal").on('hide.bs.modal', function () { alert('The modal is about to be hidden.'); });Let us see an example stating the usage of hide.bs.modal event −ExampleLive Demo Bootstrap Example #button1 { ... Read More
To display flex items vertically, use the flex-column class in Bootstrap 4 −Now set the flex-items in it − One Two Three Four Five Let us see an example to learn how to learn how to display flex-column class − ExampleLive Demo Bootstrap Example Example of Flex Column Stating the usage of flex column class: One Two Three Four Five
Use the .flex-*- column class in Bootstrap to show flex items vertically on different screen sizes:Set it vertically on small, medium, large, etc screen size. Let us see it on small and medium screen size:Small Screen SizeFlex on different screen size (Small) One Two Three Medium Screen SizeFlex on different screen size (Medium) One Two Three The following is an example implementing what I have shown above the usage of flex-*-column −ExampleLive Demo Bootstrap Example ... Read More
Use the border-top-0 class in Bootstrap 4 to remove the top border.Set the border-top-0 class − Rectangle is missing the TOP border. Let us see an example to implement the border-top-0 class −ExampleLive Demo Bootstrap Example .mystyle { width: 350px; height: 170px; margin: 10px; } Heading Two Rectangle is missing the TOP border.