CSS Framework Articles - Page 12 of 45

Use align-bottom class in Bootstrap 4 to align an element with the lowest element on the line.Set the class as −Now add content −   Bottom Alignment You can try to run the following code to align an element with the lowest element on the line in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                         Example   This is demo text   Demo Baseline   Top Alignment   Middle Alignment   Bottom Alignment

To stretch gathered items, use the .align-content-stretch class in Bootstrap 4.   Use the align-content-stretch class as −

Use the .d-*-flex class in Bootstrap to set a flexbox container on a screen size as shown below −d-flex d-sm-flex d-md-flex d-lg-flexAbove the flex is set for different screen sizes, for example,d-sm-flex = Flex for Small Screen Sized-md-flex = Flex for Medium Screen Sized-lg-flex = Flex for Large Screen Sized-xl-flex = Flex for Extra Large Screen SizeLet us see an example of the class −ExampleLive Demo       Bootstrap Example                         Understanding Flex   d-flex   Small Screen Size   Medium Screen Size   Large Screen Size   Extra Large Screen Size

The .modal(“hide”) method in Bootstrap hides the modal.Hide the Bootstrap modal on the click of a button −$("#button1").click(function(){   $("#newModal").modal("hide"); });The modal is shown using the modal(“show”) method −$("#newModal").modal("show");Let us see an example of the modal(‘hide”) method −ExampleLive Demo       Bootstrap Example                             #button1 {       width: 140px;       padding: 20px;       bottom: 150px;       z-index: 9999;       font-size:15px;       position: absolute;       ... Read More

Use the border-left-0 class to remove the left border of an element.Remove the left border of a using the class inside the −   Removing left border The “one” class is also set in the class to style it − .one {   width: 220px;   height: 220px;   margin: 50px; } You can try to run the following code to work with the border-left-0 class −ExampleLive Demo       Bootstrap Example                             .one {       width: 220px;       height: 220px;       margin: 50px;     }         Bootstrap 4   Removing left border

Add less important stuff, using the card class with the bg-secondary contextual class in Bootstrap.This class adds a gray background −Inside that, add the card body −   English You can try to run the following code to implement the card class with bg-secondary class in Bootstrap −ExampleLive Demo       Bootstrap Example                             Languages           English               French               Chinese                Russian      

To justify the flex items on the end, use the justify-content-end class.To justify the flex items on the end, on different screen sizes, use the justify-content-*-end class. The flex items justified at the end would be visible like the following on different screen sizes −Small Screen Size   Alabama   New York   Texas Medium Screen Size   Alabama   New York   Texas Let us see the complete code and learn how to work with justify-content-*-end class −ExampleLive Demo       Bootstrap Example                               US               Alabama         New York         Texas                     Alabama         New York         Texas                     Alabama         New York         Texas        

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 −ExampleLive Demo       Bootstrap Example                             Sports     Centered on small screen           GOLF       CRICKET       SQUASH         Centered on medium screen           GOLF       CRICKET       SQUASH         Centered on large screen           GOLF       CRICKET       SQUASH    

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

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 −ExampleLive Demo       Bootstrap Example                               Awards           The Pulitzer Prize               Eisner Award               Hugo & Nebula Awards