Ricky Barnes has Published 119 Articles

Bootstrap 4 .card-header class

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 12:20:50

447 Views

Use the card-header class to create header of a Bootstrap card −   This is the header After including the card header, you can add the card body and footer as shown in the following code snippet −   This is demo content.   This is the footer. ... Read More

Set blue outlined Bootstrap 4 Button

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 12:18:35

111 Views

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 −ExampleLive Demo       Bootstrap Example                             Bootstrap 4     You can see blue outline below:     Blue outline

Bootstrap 4 Button .btn-outline-light class

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 12:17:06

169 Views

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 −ExampleLive Demo   ... Read More

Align gathered items from the start in Bootstrap 4

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 12:14:19

112 Views

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 ... Read More

Bootstrap 4 .float-right class

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 12:12:18

12K+ Views

Use the float-right class in Bootstrap to place an element on the right.The default text alignment is on the left and use the float-right class to align text on the right as in the following code snippet −   This text is on the right. It can be used on ... Read More

bg-light class for Bootstrap 4 cards

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 12:09:51

405 Views

To set a light grey background for the Bootstrap 4 cards, use the bg-light class.Use “card bg-light” like any other class in Bootstrap −   Image Editor The above gives a light grey background to the Bootstrap card.Let us see an example of the card-light class −ExampleLive Demo   ... Read More

Bootstrap 4 .card-link class

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 12:03:28

622 Views

Use the card-link class to add a hover effect and blue color to any link in a card.The following is a code snippet showing three links with hover effect using the card-link class in Bootstrap 4 −   Website Development   App Development (iOS)   App ... Read More

Stretch a flex item on different screens in Bootstrap 4

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 11:18:03

122 Views

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 ... Read More

Bootstrap 4 .flex-*-column-reverse class

Ricky Barnes

Ricky Barnes

Updated on 16-Jun-2020 12:30:39

874 Views

Use the flex-*-column-reverse class to display flex items vertically and reversed on different screen sizes.Here’s the example of reversing flex items on medium device using “flex-md-column-reverse” class −   One   Two   Three In the same way, set for large devices using “flex-lg-column-reverse” class −   One   Two ... Read More

Set a grey border to an element in Bootstrap 4

Ricky Barnes

Ricky Barnes

Updated on 16-Jun-2020 12:28:08

459 Views

Set a grey border to an element, using the border-secondary class in Bootstrap 4.Add it like the following example − I have also included the “mystyle” class to style the div − .mystyle {   width: 250px;   height: 150px;   margin: 10px; } Let us see an example to ... Read More

Previous 1 ... 3 4 5 6 7 ... 12 Next
Advertisements