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
Web Development Articles
Page 722 of 801
Add a gray background color to the active link in a default Bootstrap navbar
To add gray background color to the active link, use the .active class in Bootstrap.You can try to run the following code to implement .active class −Example Bootstrap Example Website Home Tutorials Quiz Demo This is demo text.
Read MoreAdd a background color to the active list item in a Bootstrap list group
Use the .active class to add gray background color to the active list item in a list group in Bootstrap.You can try to run the following code to add background color to the active list item −Example Bootstrap Example Features of Java Interface Multi-threading Packages Collection Serialization
Read MoreCenter tabs in Bootstrap
Use the .nav-justified class in Bootstrap to center tabs in Bootstrap.You can try to run the following code to center tabs −Example Bootstrap Example Web Development The following are the web dev technologies: HTML5 jQuery JavaScript Ajax ES6
Read MoreVertically stack pills with Bootstrap
Use the .nav-stacked class in Bootstrap to vertically stack pills:You can try to run the following code to implement the .nav-stacked class −Example Bootstrap Example Database The following are the database technologies: DB2 MySQL SQL CouchDB
Read Moremodal(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 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 .rounded-circle class
To create a rounded circle with Bootstrap, use the rounded-circle class.Add the rounded-circle class in the Above, we also have a test class, which is a CSS class to style the circle −.test { width: 270px; height: 320px; background-color: yellow; }You can try to run the following code to implement the rounded-circle class in Bootstrap 4 −Example Bootstrap Example .test { width: 350px; height: 320px; background-color: yellow; } Circle We have a circle below:
Read MoreBootstrap 4 .card-text class
Use the card-text class in Bootstrap to set text in a card. Add this class in your web page by including it as any other class in an element, for example, tag in the below given code snippet − Demo text in a card The text in the card is added inside the class using the card-text class − Demo Title Demo text in a card You can try to run the following code to implement the card-text class −Example Bootstrap Example Demo Demo Title Demo text in a card
Read MoreSet a dark border to an element in Bootstrap
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 −Example Bootstrap Example ...
Read Moreborder-info class in Bootstrap 4
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 −Example Bootstrap Example .one { width: 180px; height: 180px; margin: 55px; } Rectangle with a border to set information: Details
Read More