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
Web Development Articles
Page 728 of 801
Set warning action with orange outlined Bootstrap 4 Button
Set orange outline for a Bootstrap 4 button, using the btn-outline-warning class and indicate warning action.The following includes the orange outline on a button − Rejected The class is added just as any other class added to any element in Bootstrap. For a Bootstrap button, I used the element.You can try to run the following code to implement the btn-outline-warning class −Example Bootstrap Example College Placements Selected Students Rejected Students Result Awaited List of selected and rejected students: Selected Rejected
Read MoreRemove float from an element in Bootstrap
Use the float-none class in Bootstrap to remove float from an element.The default for a text is always left; therefore removing float will place the text on the left −You can try to run the following code to remove float from an element −Example Bootstrap Example Demo This text is on the left (on small screen). This text is on the left (on medium screen). This text is on the left (float removed). This text is on the left (on extra large screen). This text is on the left (float removed).
Read MoreSet blue outlined Bootstrap 4 Button
To set blue outlined Bootstrap 4 button, use the .btn-outline-primary class.Add a blue outline to a button − Blue outline You can try to run the following code to implement the btn-outline-primary class in Bootstrap −Example Bootstrap Example Bootstrap 4 You can see blue outline below: Blue outline
Read MoreStretch a flex item on different screens in Bootstrap 4
To stretch a flex item on different screens in Bootstrap 4, use the .align-self-*-stretch class.To strect in on different screens, you need to use align-self-sm-stretch, align-self-md-stretch, align-self-lg-stretch, etc. Below is an example for small screen size − A-one B-one C-one D-one You can try to run the following code to stretch a flex item on different screen sizes −Example Bootstrap Example Align Specific Flex Item and Stretch A-one B-one C-one D-one Small Screen Size A-one B-one C-one D-one Medium Screen Size A-one B-one C-one D-one Large Screen Size A-one B-one C-one D-one
Read MoreBootstrap 4 Button .btn-outline-light class
Use the btn-outline-light class in Bootsrap 4 to set light grey outlined button.To include it on the web page, set it as a class in the element as shown in the following code snippet −Let us see an example to implement the btn-outline-light class −Example Bootstrap Example Demo Button Below is a light grayed outline button: Sample
Read MoreAlign gathered items from the start in Bootstrap 4
To align gathered items from the start, use the .align-content-start class in Bootstrap 4.Set the items as shown below − Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 You can try to run the following code to implement the align-content-start in Bootstrap 4 −Example Bootstrap Example Align Flex Items Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Work 7 Work 8 Work 9 Work 10 Work 11 Work 12 Work 13 Work 14
Read MoreAlign a flex item in the center with Bootstrap 4
To align a flex item in the center with Bootstrap 4, use the .align-self-center class.The following is my div for flex −Now add flex items and here I have applied the align-self-center class on the 3rd flex item − A-one B-one C-one D-one You can try to run the following code to implement the align-self-center class in Bootstrap −Example Bootstrap Example Align Specific Flex Item in the center A-one B-one C-one D-one
Read MoreSet key content with Bootstrap 4 card
Add key stuff to a Bootstrap card, using the bg-primary class with the card class.Use the bg-primary class in the card class − Eisner Award I have used the text-white class above, to set the text to be white.Let us see a example how to include key stuff in a Bootstrap 4 card −Example Bootstrap Example Awards The Pulitzer Prize Eisner Award Hugo & Nebula Awards
Read MoreBootstrap 4 Button .btn-outline-info class
To set an outline on a button that indicates information, you need to use the btn-outline-info class in Bootstrap.Include the button element and set the btn-outline-info class − More Info You can try to run the following code to implement the btn-outline-info class −Example Bootstrap Example Event The following are the details: Event Timings 1PM TO 4PM Venue: 21 KH, HG Lane, Alabama For more information about the event: More Info
Read MoreAlign flex items in the center on different screen sizes in Bootstrap
To align items in the center on different screen sizes, use the justify-content-*-center class.The aligned flex items would be like the following for small screen size − GOLF CRICKET SQUASH The aligned flex items would be like the following for medium screen size − GOLF CRICKET SQUASH The aligned flex items would be like the following for large screen size − GOLF CRICKET SQUASH Let us see how to implement the justify-content-*-center −Example Bootstrap Example Sports Centered on small screen GOLF CRICKET SQUASH Centered on medium screen GOLF CRICKET SQUASH Centered on large screen GOLF CRICKET SQUASH
Read More