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
Web Development Articles
Page 196 of 801
Align 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 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 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 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 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 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 MoreAvoid wrapping flex-items in Bootstrap
Use the flex-nowrap class in Bootstrap 4 to avoid wrapping the flex items.Here you can see the difference between wrap and nowrap −Above the flex-items are not wrapped. This is achieved using the flex-nowrap class in Bootstrap 4 − One Two Three Four Five Six Seven Eight Nine The following is an example to avoid wrapping 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 in Bootstrap 4
Use the .align-items-stretch class to stretch single rows of items in Bootstrap 4.To stretch single rows of items −
Read MoreHow to implement Bootstrap 4 .flex-*-nowrap class
The flex-*-nowrap class works like flex-no-wrap class to avoid wrapping of flex items.However, if you want to avoid wrapping on different screen sizes, then use the flex-*-no-wrap class like −flex-lg-nowrap: Avoid wrapping on large screen sizeflex-sm-nowrap: Avoid wrapping on small screen sizeflex-md-nowrap: Avoid wrapping on medium screen sizeThe following is an example to implement the flex-*-nowrap class −Example Bootstrap Example Flex items will wrap One ...
Read More