Kristi Castro has Published 104 Articles

Bootstrap 4 .border-primary class

Kristi Castro

Kristi Castro

Updated on 18-Jun-2020 14:13:04

137 Views

Add a blue border to an element in Bootstrap 4 using the border-primary class as shown below:Set the class as −   Blue Border You can try to run the following code to implement the border-primary class −ExampleLive Demo       Bootstrap Example       ... Read More

Bootstrap 4 .border-right-0 class

Kristi Castro

Kristi Castro

Updated on 18-Jun-2020 14:11:24

285 Views

Use the border-right-0 class in Bootstrap to remove the right border.To remove the right border −   Rectangle is missing the right border. Style the div as −.mystyle {   width: 350px;   height: 170px;   margin: 10px; }You can try to run the following code to implement the border-right- ... Read More

Bootstrap Event when the modal is about to be hidden

Kristi Castro

Kristi Castro

Updated on 18-Jun-2020 14:09:08

51 Views

The hide.bs.modal event in Bootstrap fires when the modal is about to be hidden.Firstly, hide the Bootstrap modal on button click −$("#button1").click(function(){   $("#newModal").modal("hide"); });Now, use the hide.bs.modal class and generate the alert when the modal is about to hide on button click −$("#newModal").on('hide.bs.modal', function () {   alert('The modal ... Read More

Display flex items vertically in Bootstrap 4

Kristi Castro

Kristi Castro

Updated on 18-Jun-2020 14:06:53

179 Views

To display flex items vertically, use the flex-column class in Bootstrap 4 −Now set the flex-items in it −   One   Two   Three   Four   Five Let us see an example to learn how to learn how to display flex-column class −   ExampleLive Demo   ... Read More

Set a light grey border to an element in Bootstrap 4

Kristi Castro

Kristi Castro

Updated on 18-Jun-2020 12:59:34

319 Views

To set a light grey border to an element, use the border border-light class in Bootstrap 4.Adding a light border is easy as shown below −   This element has light border You can try to run the following code to implement the border-light-class −ExampleLive Demo     ... Read More

Create an inline flexbox container in Bootstrap 4

Kristi Castro

Kristi Castro

Updated on 18-Jun-2020 08:43:16

268 Views

To create an inline flexbox container, you need to work with d-inline-flex class in Bootstrap 4 −Use the d-inline-flex class −And then set the flex items inside it as in the following code snippet −     One   Two   Three You can try to run the following code ... Read More

Add a hover effect inside the Bootstrap 4 card

Kristi Castro

Kristi Castro

Updated on 18-Jun-2020 08:41:15

459 Views

To add a hover effect, use the card-link class in Bootstrap.The following are the links using the card-link class −XAMPP (MySQL + PHP + Apache) WordPressAll of the above code is used inside the card-body class −   WordPress Installation   To work with WordPress, you need the following   ... Read More

Bootstrap 4 .justify-content-* class

Kristi Castro

Kristi Castro

Updated on 18-Jun-2020 08:39:26

1K+ Views

To align flex items, use the justify-content-* class.Use any of the following to align flex items at the start, end, around, and between.justify-content-start – Align Flex items at the start justify-content-end  - Align Flex items at the end justify-content-around – Align  flex items around on different screen sizes justify-content-between  - Alex ... Read More

Float an element to the left with Bootstrap 4

Kristi Castro

Kristi Castro

Updated on 18-Jun-2020 08:37:01

581 Views

To float an element to the left in Bootstrap, use the float-left class.Using the class, set the element on the left as shown below −   I am on the left. Set it on other elements like , , , etc −   Heading is on the left. You can ... Read More

Set negative action to the Bootstrap 4 card

Kristi Castro

Kristi Castro

Updated on 18-Jun-2020 08:34:45

60 Views

To set negative action on a Bootstrap card, use the bg-warning class with the card class as shown in the below example −   Over 20 students failed the final-year exam. Let us see an example to set negative action to a card in Bootstrap 4 −ExampleLive Demo   ... Read More

Advertisements