- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 626 Articles for CSS Framework
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
60 Views
Use the .align-content-*-stretch in Bootstrap 4 to stretch gathered items on different screens.To stretch items on different screens −Stretch items on Small Screen Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Stretch items on Medium Screen Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Stretch items on Large Screen Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Let us see an example to stretch gathered items on different screen size ... Read More
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
1K+ Views
The .modal(“hide”) method hides the modal on button click.Firstly, generate the modal and display it −$("#newModal").modal("show");After that, use the modal(“hide”) method on a button to hide the modal on button click −$("#button1").click(function(){ $("#newModal").modal("hide"); });Let us see an example of the modal(‘hide”) method wherein we are hiding a modal which generates on page load −ExampleLive Demo Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; ... Read More
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
415 Views
If you want to set content as a Bootstrap modal, then use the .modal(options) method.On button click, the modal generates as in the following script.$(document).ready(function(){ $("#button1").click(function(){ $("#newModal1").modal({backdrop: true}); }); });Above, I have set options as “backdrop:true”. Another option, we can set is “backdrop: true” −backdrop: true = Clicking outside the modal, close it.backdrop: false = Clicking outside the modal, won’t close it.You can try to run the following code to implement the modal(“options”) class −ExampleLive Demo Bootstrap Example ... Read More
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
868 Views
To show flex items vertically on different screen sizes, use the flex-*- column class. For small, medium and large screen sizes, use it as −For Small screen size −For Medium screen size −For Large screen size −Let us see an example to learn how to set flex items vertically on different screen sizes −ExampleLive Demo Bootstrap Example Example Note: Change the browser size to see the effect. Default One Two Three Flex on differet screen size (Medium) One Two Three Flex on differet screen size (Large) One Two Three
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
4K+ Views
The hidden.bs.modal event in Bootstrap fires when the modal is completely hidden.Hide the modal on button click −$("#button1").click(function(){ $("#newModal").modal("hide"); });After you will hide it, use the hidden.bs.modal Bootstrap event to generate an alert before the modal completely hides −$("#newModal").on('hidden.bs.modal', function () { alert('The modal is completely hidden now!'); });You can try to run the following code to implement the hidden.bs.modal event −ExampleLive Demo Bootstrap Example #button1 { width: 140px; ... Read More
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
54 Views
Use .align-content-around class to align gathered items "around" in Bootstrap 4.The align-content-around class is set like the below code snippet −After that add the flex items − One Two Three Four Let us see an example to align gathered items around −ExampleLive Demo Bootstrap Example Example This is demo text One Two Three Four Five Six Seven Eight Nine Ten Eleven Twleve Thirteen Fourteen
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
868 Views
Use align-text-bottom class to align an element with the bottom of the parent element's font.You need to set the align-text-bottom class as shown below − Bottom Text You can try to run the following code to implement the align-text-bottom class in Bootstrap 4 −ExampleLive Demo Bootstrap Example Example This is demo text Demo Baseline Top Alignment Top Text Bottom Text
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
134 Views
Use the border-info class in Bootstrap, to set a border that indicates information. Set the class as if you use any other class in Bootstrap: Details Above, we added border-info class. Another class, “one” is used to give shape to the div element −.one { width: 180px; height: 180px; margin: 55px; }You can try to run the following code to implement the border-info class on a rectangle −ExampleLive Demo Bootstrap Example .one { width: 180px; height: 180px; margin: 55px; } Rectangle with a border to set information: Details
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
71 Views
If you want to set a dark border to an element, use the border-dark class.Spot the difference between a normal border and dark border −To add a dark border, you need to simply add it like any other class in div as shown below − Dark Border Above, the test is the CSS style, I have used to style my rectangle (div) −.myclass { width: 150px; height: 150px; margin: 35px; }Let us see how to work with the border-dark class in Bootstrap 4 −ExampleLive Demo Bootstrap Example ... Read More