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 on Trending Technologies
Technical articles with clear explanations and examples
Add style to images with Bootstrap
The following classes are provided by Bootstrap to add style to images: .img-rounded − adds border-radius:6px to give the image rounded corners. .img-circle − makes the entire image round by adding border-radius:500px. .img-thumbnail − adds a bit of padding and a gray borderYou can try to run the following code to add style to imagesExample Bootstrap Images Styling images with Bootstrap
Read MoreMake an element look like a heading with Bootstrap
To make an element look like a heading, you can try to run the following code −Example Bootstrap Example Planet Earth Asia India Hyderabad Madhapur
Read MoreSet a light grey border to an element in Bootstrap 4
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 −Example Bootstrap Example .demo { width: 150px; height: 220px; margin: 15px; } Demo This element has light border
Read MoreImage Thumbnail with Bootstrap
To add a thumbnail to the image, use the .img-thumbnail Bootstrap class.You can try to run the following code to add a thumbnail to imagesExample Bootstrap Images Styling images with Bootstrap Original Image Thumbnail Image
Read MoreBootstrap 4 .border-primary class
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 −Example Bootstrap Example .demo { width: 250px; height: 170px; margin: 10px; } Demo Heading Blue Border
Read MoreAdd hover color to background color of the table row in Bootstrap
To add hover color to background color of the table row, use the .active class in Bootstrap.Example Bootstrap Example Student Information Student Subject Tom Maths Amit Programming Steve Java
Read MoreBootstrap 4 .border-right-0 class
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 −Example Bootstrap Example .mystyle { width: 350px; height: 170px; margin: 10px; } Heading Two Rectangle is missing the right border.
Read MoreFade in tab with Bootstrap
Use the .in class in Bootstrap to fade in the tab.You can try to run the following code to fade in tab −Example Bootstrap Example Tutorials Website The following is our learning content: Home About Product Home This is demo text! About This is demo text! Product This is demo text!
Read MoreBootstrap Event when the modal is about to be hidden
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 −Example Bootstrap Example #button1 { width: ...
Read MoreBootstrap class pull-left
Float an element to the left with class pull-left.You can try to run the following code to implement the pull-left class −Example Bootstrap Example Float to left
Read More