Found 626 Articles for CSS Framework

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

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.  

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  

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  

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

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  

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  

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  

To add a red border to an element, you need to implement the border-danger class.Red border implement danger and you can set danger messages inside it.Implementing the border-danger is quite easy −   Red Border Let us see an example to work with the border-danger Bootstrap 4 class −ExampleLive Demo       Bootstrap Example                             .new {       width: 120px;       height: 120px;       margin: 20px;     }             Rectangle with red border:     Red Border  

To add top rounded corners to an element, use the rounded-top class in Bootstrap 4.I have taken div as the element −Let us learn how to add top rounded corners to an element −ExampleLive Demo       Bootstrap Example                             .new {       width: 80px;       height: 80px;       background-color: #EE6D1E;       margin: 20px;     }             Rounded Corner     We have a rectangle with top rounded corner: