Found 626 Articles for CSS Framework

Use the card-img-overlay class to turn an image into a Bootstrap 4 card background and set the image using the element and the card-img-top class −After that, use the card-img-overlay class −   Avro   Tutorial for Apache Avro   Learn You can try to run the following code to implement the card-img-overlay class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Apach - Tool for Hadoop                         Avro         Tutorial for Apache Avro         Learn            

Use the tooltip(“hide”) method in Bootstrap to hide the tooltip. The tooltip hides on button click as shown below −$(".btn-default").click(function(){   $("[data-toggle='tooltip']").tooltip('hide'); });Above the data-toggle attribute can be seen which we set before on element. Now the toggle will generate from the link when the button is clicked −   Tooltip will be visible here You can try to run the following code to implement the tooltip(“hide”) method −ExampleLive Demo       Bootstrap Example                           ... Read More

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   Ques 2   Ques 3   Ques 4   Ques 5   Ques 6   Ques 7   Ques 8   Ques 9   Ques 10   Ques 11   Ques 12   Ques 13   Ques 14 Flex items won't wrap (large screen size)   ... Read More

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

The flex-*-nowrap class works like flex-no-wrap class to avoid wrapping of flex items.However, if you want to avoid wrapping on different screen sizes, then use the flex-*-no-wrap class like −flex-lg-nowrap: Avoid wrapping on large screen sizeflex-sm-nowrap: Avoid wrapping on small screen sizeflex-md-nowrap: Avoid wrapping on medium screen sizeThe following is an example to implement the flex-*-nowrap class −ExampleLive Demo       Bootstrap Example                             Flex items will wrap           One   ... Read More

To set rounded left corners to an element, use the rounded-left class in Bootstrap 4.Use the class on any element like − We have also included the one class to style our −.one {   width: 200px;   height: 100px;   background-color: maroon;   margin: 8px; }Let us see an example to implement the rounded-left class −ExampleLive Demo       Bootstrap Example                             .one {       width: 200px;       height: 100px;       background-color: maroon;       margin: 8px;     }             Rounded Corner     We have two rectangles with left rounded corner:          

Use the flex-nowrap class in Bootstrap 4 to avoid wrapping the flex items.Here you can see the difference between wrap and nowrap −Above the flex-items are not wrapped. This is achieved using the flex-nowrap class in Bootstrap 4 −   One   Two   Three   Four   Five   Six   Seven   Eight   Nine The following is an example to avoid wrapping flex items −ExampleLive Demo       Bootstrap Example                             FLEX WRAP AND NOWRAP     Flex items will wrap           One       Two       Three       Four       Five       Six       Seven       Eight       Nine         Flex items won't wrap           One       Two       Three       Four       Five       Six       Seven       Eight       Nine      

Remove the right border from an element; use the border-right-0 class.To remove the border −   Rectangle is not having the right border. You can try to run the following code to implement the border-right-0 class −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 350px;       height: 170px;       margin: 10px;     }                   Heading Two       Rectangle is not having the right border.      

Use the border-primary class to set a blue border to an element.For a blue border, add the class, as if you add it for or any other element − Let us see an example to set a blue border −ExampleLive Demo       Bootstrap Example                             .demo {       width: 350px;       height: 170px;       margin: 10px;     }                   Demo Heading       This rectangle has blue border      

To set an outline on a button that indicates danger, you need to use the btn-outline-danger class in Bootstrap.Set the outline in the element −   Danger Ahead You can try to run the following code to implement the btn-outline-danger class −ExampleLive Demo       Bootstrap Example                             Danger Button     Danger Ahead