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
Articles by Ricky Barnes
Page 5 of 9
Align gathered items at the end in Bootstrap 4
Use .align-content-end class to align gathered items at the end in Bootstrap 4.To set the items at the end −
Read MoreBootstrap hide.bs.tooltip event
The hide.bs.tooltip event in Bootstrap fires when the tooltip is about to be hidden.Click the hide button first −$(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('hide'); });On clicking above the hide.bs.tooltip event fires and an alert generates −$("[data-toggle='tooltip']").on('hide.bs.tooltip', function(){ alert('Tooltip will hide now.'); });You can try to run the following code to implement the hide.bs.tooltip event −ExampleLive Demo Bootstrap Example Event Here tooltip will be displayed using the "Show" buttpn and can be hidden ...
Read MoreDark grey outlined Bootstrap 4 Button
To set dark grey outlined border to a button, use the btn-outline-dark class.Include the brn-outline-dark class as if you add any other class to an element. Here, we have the button element since we want a dark grey outline for our button: Dark gray outline Let us see an eample to implement the btn-outline-dark class in Bootstrap −ExampleLive Demo Bootstrap Example Bootstrap 4 Learning btn-outline-dark class usage: Dark gray outline
Read MoreBootstrap 4 Button .btn-outline-primary class
The btn-outline-primary class is used in Bootstrap 4 to set blue outlined button.Add blue outline to the button using the btn-outline-primary class as shown in the following code snippet − Result You can try to run the following code to implement the btn-outline-primary class −ExampleLive Demo Bootstrap Example Result Click below to get the result: Result
Read MoreCreate a block element on a specific screen width with Bootstrap 4
To create a block on a specific screen width, use the .d-*-block class.The specific screen width can be small, medium, large and extra large. Set the class indivifually based on the screen size as shown below − d-sm-block d-md-block d-lg-block< /span> d-xl-block Let us see the complete example to learn how to create a block element on a specific screen width −ExampleLive Demo Bootstrap Example Blocks Resize the browser to check the effect d-block d-sm-block d-md-block d-lg-block d-xl-block
Read MoreCreate a Flexbox container with Bootstrap 4
Use the d-flex class in Bootstrap to create a flexbox container.Here, I have set two flex items − One Two Above, I have used the d-flex class to set the container. The container has both the flex items styled using the bg-primary and bg-warning classes respectively.Let us see the complete example −ExampleLive Demo Bootstrap Example Understanding Flex One Two
Read MoreSet a green border to an element in Bootstrap to indicate success
To set green border, use the border-success class in Bootstrap 4.The below element will have green border since we have set the class of the as border-success class − Green border You can try to run the following code to set green border to an element indicating success −ExampleLive Demo Bootstrap Example .mystyle { width: 150px; height: 150px; margin: 10px; } Rectangle Green border
Read Morehide.bs.popover Bootstrap event
The hide.bs.popover event fires when the popover is about to be hidden.Add a click button to hide the popver using the popver(“hide”) method −$(".btn-default").click(function(){ $("[data-toggle='popover']").popover('hide'); });After clicking the button, fire the popover event and generate an alert using the hide.bs.popver event in Bootstrap −$("[data-toggle='popover']").on(hide.bs.popover', function(){ alert('Popover is about to be hidden!'); });You can try to run the following code to implement the hide.bs.popover event −ExampleLive Demo Bootstrap Example Awards ...
Read MoreBootstrap Event when the modal is fully hidden
The hidden.bs.modal event in Bootstrap fires when the modal is completely hidden.Firstly, click on the hide button to hide the modal −$("#button1").click(function(){ $("#newModal").modal("hide"); }); After clicking the button, the hidden.bs.modal fires and generates an alert using the following script −$("#newModal").on('hidden.bs.modal', function () { alert('The modal is completely hidden now!'); });Let us see an example to implement the hidden.bs.modal event −ExampleLive Demo Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; ...
Read MoreAdd bottom rounded corners to an element in Bootstrap 4
If you want to add rounded corners to an element, then use the rounded-bottom class.Use it on any element like −Above, we have set demo as well for class, for our div that is a rectangle.Here is our demo CSS class − .demo { width: 110px; height: 150px; background-color: blue; } You can try to run the following code to add bottom rounded corners to an element −ExampleLive Demo Bootstrap Example .demo { width: 110px; height: 150px; background-color: blue; } Rectangle We have a rectangles with rounded corners (bottom):
Read More