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 .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 MoreStretch 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 MoreUsage of Bootstrap class panel-primary
The panel-primary class in Bootstrap is a contextual state class. Yes, it is blue in color.You can try to run the following code to implement a panel-primary class in BootstrapExample Bootstrap Example Panel title This is a Basic panel
Read MoreInclude list groups within any Bootstrap Panel
To include list groups within Bootstrap panel, create a panel by adding class .panel to the element.Also, add class .panel-default to this element. Now within this panel include your list groups.Example Bootstrap Example Tutorials List of tutorials C Java Ruby C++
Read MoreSet positive success action with green outlined Bootstrap 4 Button
To set an outline on a button that indicates positive action, you need to use the btn-outline-success class in Bootstrap.Here is how you can set it: More (Green Outline) You can try to run the following code to implement the btn-outline-success class −Example Bootstrap Example Python The following are the Python Technologies : Jython WxPython For more, click below: More (Green Outline)
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 MoreAlign 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 MoreSet a blue border to an element in Bootstrap
Use the border-primary class to set a blue border to an element.For a blue border, add the class, as if you add it for or any other element − Let us see an example to set a blue border −Example Bootstrap Example .demo { width: 350px; height: 170px; margin: 10px; } Demo Heading This rectangle has blue border
Read MoreUsage of Bootstrap panel-default
For a basic panel, add class .panel to the element. With that, add class .panel-default to this element.You can try to run the following code to implement a panel-default classExample Bootstrap Example This is demo text in a panel.
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 −Example Bootstrap Example Event Here tooltip will be displayed using the "Show" buttpn and can be hidden using ...
Read More