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 on Trending Technologies
Technical articles with clear explanations and examples
Bootstrap 4 .border-dark class
To set a dark border to an element in Bootstrap, use the border-dark class.To work with it is an easy task. Just use the class name as the element class − Dark Border Above, the "test" class can also be seen. This is useful to set style for the element − .test { width: 150px; height: 150px; margin: 35px; } You can try to run the following code to implement the border-dark class in Bootstrap 4 −Example Bootstrap Example .test { width: 150px; height: 150px; margin: 35px; } Rectangle with dark border: Dark Border
Read MoreBootstrap panel class
Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the element.You can try to run the following code to implement panel class in BootstrapExample Bootstrap Example Demo panel
Read MoreBootstrap .tooltip("destroy") method
Use the tooltip(“destroy”) method in Bootstrap to detroy the tooltip −$(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('destroy'); });The following example has two buttons, one for “Show Tooltip” and another for “Destroy Tooltip” −Show Tooltip$(".btn-primary").click(function(){ $("[data-toggle='tooltip']").tooltip('show'); });Destroy Tooltip$(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('destroy'); });Here is the complete code to implement the tooltip(“destroy”) method −Example Bootstrap Example Demo Tooltip will be visible here Show Tooltip Destroy Tooltip $(document).ready(function(){ $(".btn-primary").click(function(){ $("[data-toggle='tooltip']").tooltip('show'); }); $(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('destroy'); }); });
Read MoreSet Bootstrap Panel with Heading
Follow the below steps to set Bootstrap panel with heading −Use .panel-heading class to add a heading container to your panel.Use any - with a .panel-title class to add a pre-styled heading.You can try to run the following code for panel with headings in Bootstrap −Example Bootstrap Example Tutorials Learn for free Quiz Attempt these quizzes
Read MoreAlign a flex item from the start with Bootstrap 4
Use the .align-self-start class in Bootstrap 4 to align a flex item from the start.To align flex item from the start, you need to set the class in that particular flex item − Item 3 The above is set inside the flex class as shown below − Item 1 Item 2 Item 3 Item 4 You can try to run the following code to implement the align-self-start class −Example Bootstrap Example Align Specific Flex Item from the start Item 1 Item 2 Item 3 Item 4
Read MoreUsage of Bootstrap class panel-danger
The .panel-danger class in Bootstrap is used to indicate danger.You can try to run the following code to implement panel-danger class −Example Bootstrap Example Panel title (danger) This is a Basic panel
Read MoreBootstrap show.bs.tooltip event
The show.bs.tooltip event in Bootstrap fires when the tooltip is about to be displayed −$("[data-toggle='tooltip']").on('show.bs.tooltip', function(){ alert('Tooltip will be visible now.'); });The "data-toggle" attribute is set before as an tag attribute, since the Bootstrap generates from there itself − Timings You can try to run the following code to implement the show.bs.tooltip event −Example Bootstrap Example Event Here tooltip will be displayed using the "Show" buttpn and ...
Read MoreAlign gathered items in the center in Bootstrap 4
Use the .align-content-center class to align gathered items in the center in Bootstrap 4.Set the align-content-center class as shown below −After that, add the flex items − One Two Three Let us see an example to implement the align-content-center class −Example Bootstrap Example Example One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen
Read MoreHow to use Bootstrap Scrollspy Plugins
The Scroll spy (auto updating nav) plugin allows you to target sections of the page based on the scrollposition. In its basic implementation, as you scroll, you can add .active classes to the navbar based onthe scroll position.You can try to run the following code to implement scrollspy plugin in Bootstrap −Example Bootstrap Example Toggle ...
Read MoreBootstrap 4 .flex-nowrap class
Avoid wrapping flex items in Bootstrap 4, using the .flex-nowrap class.Below you can see the flex items aren’t wrapping after the “Eight” flex-item −The flex is set in the div class as if we add any other class in −The following is an example to implement flex-nowrap class to avoid wrapping of flex items −Example Bootstrap Example FLEX WRAP AND NOWRAP Flex items will wrap One Two Three Four Five Six Seven Eight Nine Flex items won't wrap One Two Three Four Five Six Seven Eight Nine
Read More