- 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 700 Articles for Bootstrap
66 Views
Use the .align-self-*-start class to align a flex item at the baseline on different screens in Bootstrap 4.On different screen sizes, set the baseline as −Small Screen A-one B-one C-one D-one Medium Screen A-one B-one C-one D-one Large Screen A-one B-one C-one D-one You can try to run the following code to implement the align-self-*-start class −ExampleLive Demo Bootstrap Example Align Specific Flex Item at the baseline A-one B-one C-one D-one Small Screen Size A-one B-one C-one D-one Medium Screen Size A-one B-one C-one D-one Large Screen Size A-one B-one C-one D-one
198 Views
To toggle the popover on button click, use the popver(“toggle”) method.Set the popover toggle as −$(document).ready(function(){ $(".btn-default").click(function(){ $("[data-toggle='popover']").popover('toggle'); }); });On button click, the popover generates − (Course) Toggle Popover The popver, on button click, generates the popover on a link − Learn The following is an example stating the usage of popver(“toggle”) method −ExampleLive Demo Bootstrap Example Learn The following is the button: (Course) Toggle Popover $(document).ready(function(){ $(".btn-default").click(function(){ $("[data-toggle='popover']").popover('toggle'); }); });
580 Views
To activate the popover with an option, you need to use the .popver(options) method −Set the button for popover as − Timings Set the popover title, header, etc. All of these comes under popover options −$(document).ready(function(){ $('.btn-default').popover({title: "Event Timings", content: "3PM - 6PM", placement: "right"}); });Let us see the complete example of the .popover(method) −ExampleLive Demo Bootstrap Example Information Details about the event: Timings $(document).ready(function(){ $('.btn-default').popover({title: "Event Timings", content: "3PM - 6PM", placement: "right"}); });
117 Views
If you want to add rounded corners to an element, then use the rounded-bottom class.Use it on any element like −Above, we have set demo as well for class, for our div that is a rectangle.Here is our demo CSS class − .demo { width: 110px; height: 150px; background-color: blue; } You can try to run the following code to add bottom rounded corners to an element −ExampleLive Demo Bootstrap Example .demo { width: 110px; height: 150px; background-color: blue; } Rectangle We have a rectangles with rounded corners (bottom):
547 Views
The hidden.bs.modal event in Bootstrap fires when the modal is completely hidden.Firstly, click on the hide button to hide the modal −$("#button1").click(function(){ $("#newModal").modal("hide"); }); After clicking the button, the hidden.bs.modal fires and generates an alert using the following script −$("#newModal").on('hidden.bs.modal', function () { alert('The modal is completely hidden now!'); });Let us see an example to implement the hidden.bs.modal event −ExampleLive Demo Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; ... Read More
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
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
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
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