Use the card-img-top class in Bootstrap 4, to set the image at the top inside a card in Bootstrap 4 −Add the image inside the card class −Now add the card body that includes title and text −   Swift 4   Learn Swift 4   Begin The following is an example to place an image at the top inside a Bootstrap 4 card −ExampleLive Demo       Bootstrap Example                             SWIFT 4 Tutorial     Video Tutorial on Switft 4                         Swift 4         Learn Swift 4         Begin            

To form an element as a circle, use the .rounded-circle class in Bootstrap.It is easy to implement it −Let us see an example to create a circle in Bootstrap −ExampleLive Demo       Bootstrap Example                             .test {       width: 300px;       height: 300px;       background-color: orange;     }           Circle     We have a circle below:      

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

Use the card-img-top class in Bootstrap to set the image at the top inside a card −After that add the card and card body −   Swift 4   Learn Swift 4   Begin You can try to run the following code to implement the card-img-top class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             SWIFT 4 Tutorial     Video Tutorial on Switft 4                         Swift 4         Learn Swift 4         Begin            

Use the card-img-overlay class to turn an image into a card background.You need to first set the element and then use the card-img-overlay class as in the following code snippet −         Avro     Tutorial for Apache Avro     Learn   Let us see an example to learn how to turn an image into a Bootstrap card background −ExampleLive Demo       Bootstrap Example                         Apach - Tool for Hadoop                 Avro       Tutorial for Apache Avro       Learn      

To set an outline on a button that is of light grey color, you need to use the btn-outline-light class in Bootstrap.Use the class as −   Sample You can try to run the following code to implement the btn-outline-light class −ExampleLive Demo       Bootstrap Example                       Demo Button A light colored button is visible below:   Sample

To place the image at the bottom inside a card, use the card-img-bottom class.Firstly, set the card body and then use the tag to add an image. The following code snippet is added inside the card class −   Quantitative Aptitude   For Entrance Exams   Sample Questions The following is an example to learn how to place image at the bottom inside a card in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                         Quantitative Aptitude Questions Answers             Quantitative Aptitude       For Entrance Exams       Sample Questions          

Use the .align-items-start in Bootstrap 4 to align single rows of items from the start.Set the align-items-start class −Add the flex items −   Product 1   Product 2   Product 3  Implementing align-items-start class to align single rows of items −ExampleLive Demo       Bootstrap Example                           Align Flex Items on a single row       Product 1     Product 2     Product 3     Product 4    

Use the card-header-pills class in Bootstrap 4 to style navigation pills in card header.Set the navigation using the card-header-pills −The following is the code snippet to use the car-header-pills class with the na-pills class −                     Java                     C             The following is an example to implement the card-header-pills Bootstrap 4 class −ExampleLive Demo       Bootstrap Example                             Programming                                         Java                                 C                                 C++                                       Java Installation         Download JAVA JDK from Oracle Java website and...              

To style navigation tab inside the card header in Bootstrap 4, use the .card-header-tabs and create navigation tabs like the below example −The following is an example to style navigation tabs inside the Bootstrap 4 card header −ExampleLive Demo       Bootstrap Example                             IDE                                         Eclipse IDE                                 NetBeans IDE                                       Eclipse IDE Introduction         Eclipse is a widely used Java IDE.