Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Alex Onsman
Page 9 of 15
modal(options) method in Bootstrap
If you want to set content as a Bootstrap modal, then use the .modal(options) method.For this, use jQuery to set the model on the click of a button as in the following code snippet −$(document).ready(function(){ $("#button1").click(function(){ $("#newModal1").modal({backdrop: true}); }); });Let us now implement the modal(“options”) class. Here, we have two buttons that would generate different types of modals on click. One of them would close on clicking outside the modal, but another one will not close.Here is the complete example −Example Bootstrap Example Sample ...
Read MoreRemove float from an element in Bootstrap
Use the float-none class in Bootstrap to remove float from an element.The default for a text is always left; therefore removing float will place the text on the left −You can try to run the following code to remove float from an element −Example Bootstrap Example Demo This text is on the left (on small screen). This text is on the left (on medium screen). This text is on the left (float removed). This text is on the left (on extra large screen). This text is on the left (float removed).
Read MoreBootstrap Event when the modal is about to be shown
The show.bs.modal event in Bootstrap fires when the modal is about to be displayed. Here, I have added a script to generate an alert − $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("show"); }); $("#newModal").on('show.bs.modal', function () { alert('The modal will be displayed now!'); }); }); Above, on button click, the modal generates. After that, I have used the show.bs.modal event to generate an alert when the modal is just about to be visible.The following is an example to demonstrate how to fire show.bs.modal event in Bootstrap when the modal is about to be displayed −Example ...
Read MoreBootstrap 4 class for a single flex item to take up the available space
In Bootstrap 4, if you want a flex item to take up the available space, then use the flex-grow-|1 class.If you want the first flex item to take up the space, then the following is the code − One Two Three Above you can see, I have used the flex-grow-1 class in the first div class − One The following is an example to implement the flex-grow-0|1 class −Example Bootstrap Example
Read MoreBootstrap 4 .border-left-0 class
Use the border-left-0 class to remove the left border of an element.Remove the left border of a using the class inside the − Removing left border The “one” class is also set in the class to style it − .one { width: 220px; height: 220px; margin: 50px; } You can try to run the following code to work with the border-left-0 class −Example Bootstrap Example .one { width: 220px; height: 220px; margin: 50px; } Bootstrap 4 Removing left border
Read MoreBootstrap 4 Button .btn-outline-warning class
To set an outline on a button that indicates warning, you need to use the btn-outline class in Bootstrap.For my class, I have taken the below button − Warning (Errors) The button above has the class btn-outline-warning that allow us to add an orange outline stating warning action −You can try to run the following code to implement the btn-outline-warning class −Example Bootstrap Example Warning The following are the warning messages: semi-colon (;) missing infinite loop For more warning messages: Warning (Errors)
Read MoreSet positive action to the Bootstrap 4 card
To set positive/ success action to a card in Bootstrap, use the card-success class.Here, I have set the card-success class like we set class on any element like . Deal! In the same way, set other success messages − Task complete! Let us implement success action on a Bootstrap 4 card −Example Bootstrap Example Success Messages Deal! Cleared the 2nd round! Victory! Task complete!
Read Morecard-title class in Bootstrap 4
Use the card-title class in Bootstrap 4 to set title for the card like the following example −The card title set above used the card-title class inside the card-body class. In addition, I have used the card-text class to set text inside the Bootstrap card as shown in the below give code snippet − Company Locations Singapore Malaysia Australia You can try to run the following code to implement the card-title class −Example Bootstrap Example Location Company Locations Singapore Malaysia Australia
Read MoreBootstrap .tab("show") method
Use the Bootstrap .tab(“show”) method to display the tabs.The following are the nav tabs − Home PHP C#.NET Ruby HTML5 Using a script and the tab(“show”) method, the above tabs are displayed as in the following code snippet −$(document).ready(function(){ $(".nav-tabs a").click(function(){ $(this).tab('show'); }); });Let us see an example to learn how to display tabs using the tab(“show”) method −Example Bootstrap Example Web Dev ...
Read Moreshow.bs.tab event in Bootstrap
The show.bs.event fires when the tab is about to be displayed.Display the tab using the nav-tabs class − Home Java CSS Bootstrap jQuery After that, you need to use the show.bs.tab class to generate an alert after the tab is clicked, but just before it is displayed −$('.nav-tabs a').on('show.bs.tab', function(){ alert('New tab will be visible now!'); });You can try to run the following code to implement the show.bs.tab event −Example Bootstrap Example ...
Read More