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
Bootstrap Articles
Page 5 of 49
Bootstrap 4 .justify-content-*-end class
To justify the flex items on the end, use the justify-content-end class.To justify the flex items on the end, on different screen sizes, use the justify-content-*-end class. The flex items justified at the end would be visible like the following on different screen sizes −Small Screen Size Alabama New York Texas Medium Screen Size Alabama New York Texas Let us see the complete code and learn how to work with justify-content-*-end class −Example Bootstrap Example US Alabama New York Texas Alabama New York Texas Alabama New York Texas
Read MoreBootstrap 4 .card-img-bottom class
Use the card-img-bottom class in Bootstrap 4 to place an image at the bottom inside a Bootstrap 4 card.Set the card body, and within that, the card title and card text − Quantitative Aptitude For Entrance Exams Sample Questions Now set image with class “card-img-bottom”−Let us see an example to learn how to implement Bootstrap 4 .card-img-bottom class −Example Bootstrap Example Quantitative Aptitude Questions Answers Quantitative Aptitude For Entrance Exams Sample Questions
Read MoreBootstrap shown.bs.tab event
The shown.bs.event fires when the tab is completely displayed. After that the alert generates as shown below −$('.nav-tabs a').on('shown.bs.tab', function(){ alert('New tab is now visible!'); });The tabs are displayed using the show() method −$(".nav-tabs a").click(function(){ $(this).tab('show'); });You can try to run the following code to implement the shown.bs.tab event −Example Bootstrap Example Topic Home ...
Read MoreAlign flex items from everywhere in Bootstrap
Use the .justify-content-* class in Bootstrap to align flex items from start, end, center, between, etc.For justify-content-start, the justified flex items would be aligned like −For justify-content-end, the justified flex items would be aligned like −For justify-content-around, the justified flex items would be aligned like −Let us see how to justify content −Example Bootstrap Example Rank 1 RANK 2 RANK3 RANK 1 RANK 2 RANK 3 RANK 1 RANK 2 RANK 3
Read MoreAlign flex items in the end on different screen sizes in Bootstrap
Use the .justify-content-*-end class to align flex items in the end on different screen sizes like this −For small screen size, use −justify-content-sm-endFor medium screen size, use −justify-content-md-endFor large screen size, use −justify-content-lg-endLet us see how to align flex items horizontally on small, medium and large screen sizes −Example Bootstrap Example Form of Tea Black Tea Green Tea Indian Tea Black Tea Green Tea Indian Tea Black Tea Green Tea Indian Tea
Read MoreHow to create a responsive website with Bootstrap 4?
To create a responsive website with Bootstrap 4, the code is as follows −Example Bootstrap 4 Website Example body{ height: 100vh; } Website ⇅ Logo Link Link Link Headline 1 Published in January Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perferendis hic quas praesentium quod totam atque dignissimos nobis numquam consequuntur? Headline 2 Published in march Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam doloribus incidunt voluptatum labore dolorem voluptate iure dicta, dolorum quis maiores. Copyright © Website OutputThe above code will produce the following output −On resizing the screen −
Read MoreCaret Bootstrap class
Use carets to indicate dropdown functionality and direction. To get this functionality use the class caret with a element.You can try to run the following code to implement caret Bootstrap classExample Bootstrap Example Caret Example
Read MoreBootstrap table-responsive class
Wrapping any .table in .table-responsive class, you will make the table scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.To make a responsive table, you can try to run the following code −Example Bootstrap Table Subject Marks Student Programming 90 Amit Web Dev 92 Yuvraj Science 95 Sachin Economics 80 Tony
Read MoreBootstrap class input-group-xs
To make extra small input group, use the input-group-xs.You can try to run the following code to implement the input-group-xs class in Bootstrap −Example Bootstrap Example $
Read MoreIndicate a dangerous action to a particular table row or cell with Bootstrap
To indicate a dangerous action to a particular table row or cell with Bootstrap, use the .danger class. You can try to run the following code to implement the .danger class −Example Bootstrap Table Subject Marks Type Java 90 Programming Language PHP 92 Scrpting Language jQuery 80 JavaScript Library
Read More