Ricky Barnes has Published 127 Articles

Bootstrap 4 .border-0 class

Ricky Barnes

Ricky Barnes

Updated on 18-Jun-2020 13:53:39

223 Views

Use the border-0 class in Bootstrap to eliminate all borders from an element as shown below −   No border We have also set CSS style above −.mystyle {   width: 120px;   height: 100px;   margin: 10px;   background: gray; }You can try to run the following code to ... Read More

Bootstrap 4 Button .btn-outline-dark class

Ricky Barnes

Ricky Barnes

Updated on 18-Jun-2020 13:52:00

234 Views

Use the .btn-outline-dark class in Bootstrap to set dark outline on a button.The following is an example of a button with dark outline −Set the above outline to the button, using the btn-outline-dark class as shown below −   Submit You can try to run the following code to implement ... Read More

Avoid wrapping flex-items in Bootstrap on different screens

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 15:17:47

83 Views

You can wrap the flex items on difference screen sizes, using the flex-*-nowrap class. As shown below, wrapping is avoided here −The above avoids wrapping of flex item on small and large screen size using the following code snippet −Flex items won't wrap (small screen size)   Ques 1 ... Read More

Stretch single rows of items in Bootstrap 4

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 14:36:50

710 Views

Use the .align-items-stretch class to stretch single rows of items in Bootstrap 4.To stretch single rows of items −

Bootstrap 4 .flex-grow-0|1 class

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 14:27:59

181 Views

Use the .flex-grow-0|1 class in Bootstrap to allow a singly lex item to take up rest of the space in the flex.For example, the following takes rest of the space in the right −The above is set by adding flex-grow class for the last flex-item −   P   Q ... Read More

Flex items into equal widths on different screens with Bootstrap 4

Ricky Barnes

Ricky Barnes

Updated on 17-Jun-2020 14:22:02

251 Views

To set flex items to equal width on different screens, use the the flex-*-fill class.For small width screen, use flex-sm-fill −   A For large width screen, use flex-lg-fill −   A The following is an example to give euqla width to flex items on different screens −ExampleLive Demo ... Read More

Bootstrap 4 .card-header class

Ricky Barnes

Ricky Barnes

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

356 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

58 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

120 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

49 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

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