Alex Onsman has Published 203 Articles

Bootstrap 4 .card-img-top class

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:54:35

623 Views

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 ... Read More

Bootstrap 4 .border-white class

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:41:54

108 Views

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 ... Read More

Form the element as a circle in Bootstrap

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:39:43

336 Views

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:      

Place the image at the top inside a Bootstrap 4 card

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:38:04

68 Views

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 ... Read More

Add information with Bootstrap 4 card

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:35:57

78 Views

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     ... Read More

Set warning action with orange outlined Bootstrap 4 Button

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:34:25

172 Views

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 ... Read More

Indicate danger with red outlined Bootstrap 4 Button

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:30:58

88 Views

Use the btn-outline-danger class in Bootsrap 4 to indicate danger with red outlined button.The following is an example to set a button that indicates danger with red outline −   Danger The class is added using the btn and btn-outline-danger class in Bootstrap −class="btn btn-outline-danger”Let us see an example to ... Read More

Remove float from an element in Bootstrap

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:22:04

265 Views

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       ... Read More

Align single rows of items from the start in Bootstrap 4

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:14:52

98 Views

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    

Place the image at the bottom inside a Bootstrap 4 card

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:11:51

561 Views

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 ... Read More

Advertisements