Found 10483 Articles for Web Development

Bootstrap 4 .flex-*-column class

Ricky Barnes
Updated on 18-Jun-2020 14:02:51

439 Views

Use the .flex-*- column class in Bootstrap to show flex items vertically on different screen sizes:Set it vertically on small, medium, large, etc screen size. Let us see it on small and medium screen size:Small Screen SizeFlex on different screen size (Small)   One   Two   Three Medium Screen SizeFlex on different screen size (Medium)   One   Two   Three The following is an example implementing what I have shown above the usage of flex-*-column −ExampleLive Demo       Bootstrap Example                 ... Read More

Display flex items vertically in Bootstrap 4

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

264 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       Bootstrap Example                             Example of Flex Column     Stating the usage of flex column class:           One       Two       Three       Four       Five      

Bootstrap Event when the modal is about to be hidden

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

106 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 is about to be hidden.'); });Let us see an example stating the usage of hide.bs.modal event −ExampleLive Demo       Bootstrap Example                             #button1 {       ... Read More

Bootstrap 4 .border-right-0 class

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

396 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- 0 class −ExampleLive Demo   Bootstrap Example               .mystyle {     width: 350px;     height: 170px;     margin: 10px;   }         Heading Two     Rectangle is missing the right border.  

Bootstrap 4 .border-primary class

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

219 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                             .demo {       width: 250px;       height: 170px;       margin: 10px;     }             Demo Heading     Blue Border  

Set a light grey border to an element in Bootstrap 4

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

472 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       Bootstrap Example                             .demo {       width: 150px;       height: 220px;       margin: 15px;     }             Demo     This element has light border  

Bootstrap .modal("show") method

David Meador
Updated on 18-Jun-2020 12:09:37

4K+ Views

The modal(“show”) method opens a modal like below −The modal is displayed using the modal(“show”) method as shown below −$("#newModal").modal("show");Let us see an example of modal(“show”) method −ExampleLive Demo       Bootstrap Example                             #button1 {       width: 140px;       padding: 20px;       bottom: 150px;       z-index: 9999;       font-size: 15px;       position: absolute;       margin: 0 auto;     }     ... Read More

Remove borders from an element in Bootstrap

Amit Diwan
Updated on 18-Jun-2020 12:15:04

3K+ Views

Use the border-0 class in Bootstrap 4 to remove all borders from an element in Bootstrap 4 −   no border Above, we have the div class to no-border class and this allow us to remove the borders from the element.Let us see an example to implement the border-0 class in Bootstrap −ExampleLive Demo       Bootstrap Example                            .mystyle {      width: 120px;      height: 100px;      margin: 10px;      background: maroon;    }             Rectangle     no border  

Bootstrap 4 .border-light class

David Meador
Updated on 18-Jun-2020 12:17:03

247 Views

Use the border-light class in Bootstrap 4, to set a light gray border to an element as shown below   light border Style for the demo class is for the element −.demo {   width: 150px;   height: 220px;   margin: 15px; }Learn how to work with the border-light class in Bootstrap −ExampleLive Demo       Bootstrap Example                             .demo {         width: 150px;       height: 220px;       margin: 15px;     }             Bootstrap 4     light border  

Set a border to an element in Bootstrap to indicate information

Amit Diwan
Updated on 18-Jun-2020 12:18:29

105 Views

To set a border indicating information, use the border-info class.To implement it −   Information Let us see an example to implement the border-info class −ExampleLive Demo       Bootstrap Example                             .one {       width: 200px;       height: 240px;       margin: 40px;     }             Rectangle with a border indicating information:     Information  

Advertisements