CSS Framework Articles - Page 13 of 45

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 −ExampleLive Demo       Bootstrap Example                             Align Specific Flex Item in the center           A-one       B-one       C-one       D-one      

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       Bootstrap Example                             Web Tools           Image Editor             Image Optimizer      

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 −ExampleLive Demo       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        

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       Bootstrap Example                         Demo Button   Below is a light grayed outline button:       Sample  

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

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 −ExampleLive Demo       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      

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

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 −ExampleLive Demo       Bootstrap Example                       College Placements   Selected Students   Rejected Students   Result Awaited List of selected and rejected students: Selected Rejected

To add information to a card in Bootstrap 4, use the bg-info class.Use the card class with the bg-info class:Add the card body after that using the card-body class −   Demo Text You can try to run the following code to add information −ExampleLive Demo       Bootstrap Example                         Festival Celebration       Reach till 5PM  

To set white border to an element, use the border-white class.Add white border −   This has white border Above, I have also added a style to set the div element −.mystyle {   width: 200px;   height: 100px;   margin: 10px;   background: blue; }Let us see an eample to implement the border-white class in Bootstrap −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 200px;       height: 100px;       margin: 10px;       background: blue;     }         The following are two Rectangles:   This has white border   This has orange border