- 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
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
67 Views
Use align-top class to align an element with the top of the tallest element on the line.Align the element like this − Top Alignment Let us see an example to implement the align-top class in Bootstrap 4 −ExampleLive Demo Bootstrap Example Example This is demo text Demo Baseline Top Alignment Middle Alignment Bottom Alignment
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
431 Views
Create a grid of cards with Bootstrap 4, using the card-columns class.Set the grid inside the class − Include the card body inside the card container as in the following code snippet. I have added the card body under the card-class. The card-class is added inside the card-columns class − Accessories Let us see an example to create a grid of cards in Bootstrap −ExampleLive Demo Bootstrap Example Products Accessories Furnitures
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
227 Views
The btn-outline-primary class is used in Bootstrap 4 to set blue outlined button.Add blue outline to the button using the btn-outline-primary class as shown in the following code snippet − Result You can try to run the following code to implement the btn-outline-primary class −ExampleLive Demo Bootstrap Example Result Click below to get the result: Result
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
251 Views
To set dark grey outlined border to a button, use the btn-outline-dark class.Include the brn-outline-dark class as if you add any other class to an element. Here, we have the button element since we want a dark grey outline for our button: Dark gray outline Let us see an eample to implement the btn-outline-dark class in Bootstrap −ExampleLive Demo Bootstrap Example Bootstrap 4 Learning btn-outline-dark class usage: Dark gray outline
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
77 Views
Use the .align-self-*-start class in Bootstrap 4 to align a flex item from the start on different screens.To align a flex item on different screens −Small Screen Item 1 Item 2 Item 3 Item 4 Large Screen Item 1 Item 2 Item 3 Item 4 Let us see the complete example to align a flex item from the start on different screens −ExampleLive Demo Bootstrap Example Align Specific Flex Item from the start Item 1 Item 2 Item 3 Item 4 Small Screen Size Item 1 Item 2 Item 3 Item 4 Medium Screen Size Item 1 Item 2 Item 3 Item 4 Large Screen Size Item 1 Item 2 Item 3 Item 4
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
128 Views
The hide.bs.tooltip event in Bootstrap fires when the tooltip is about to be hidden.Click the hide button first −$(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('hide'); });On clicking above the hide.bs.tooltip event fires and an alert generates −$("[data-toggle='tooltip']").on('hide.bs.tooltip', function(){ alert('Tooltip will hide now.'); });You can try to run the following code to implement the hide.bs.tooltip event −ExampleLive Demo Bootstrap Example Event Here tooltip will be displayed using the "Show" buttpn and can be hidden ... Read More
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
85 Views
To set an outline on a button that indicates positive action, you need to use the btn-outline-success class in Bootstrap.Here is how you can set it: More (Green Outline) You can try to run the following code to implement the btn-outline-success class −ExampleLive Demo Bootstrap Example Python The following are the Python Technologies : Jython WxPython For more, click below: More (Green Outline)
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
182 Views
Use the bg-primary class in Bootstrap 4, to add important stuff to a card and set blue background color.Style the Bootstrap 4 card as in the following code snippet − Medical Books I have set the body of the card in the card-body class − Medical Books To implement the bg-primary class in Bootstarp 4, you can try to run the following code −ExampleLive Demo Bootstrap Example Books History Books Medical Books
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
258 Views
The shown.bs.tooltip event in Bootstrap fires when the tooltip is completely displayed:$("[data-toggle='tooltip']").on('shown.bs.tooltip', function(){ alert('Tooltip is completely visible now.'); });The data-toggle attribute above is set on a link, wherein the popup will originate on button click as shown in the following code snippet: Timings You can try to run the following code to implement the shown.bs.tooltip event −ExampleLive Demo Bootstrap Example Event Here tooltip will be displayed using the ... Read More