Web Development Articles

Page 696 of 801

Bootstrap 4 .justify-content-*-end class

Amit Diwan
Amit Diwan
Updated on 11-Mar-2026 701 Views

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 More

Bootstrap 4 .card-img-bottom class

Kristi Castro
Kristi Castro
Updated on 11-Mar-2026 580 Views

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 More

Bootstrap shown.bs.tab event

Alex Onsman
Alex Onsman
Updated on 11-Mar-2026 1K+ Views

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 More

Align flex items from everywhere in Bootstrap

Alex Onsman
Alex Onsman
Updated on 11-Mar-2026 209 Views

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 More

Align flex items in the end on different screen sizes in Bootstrap

Alex Onsman
Alex Onsman
Updated on 11-Mar-2026 1K+ Views

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 More

How to get objects by ID, Class, Tag, and Attribute in jQuery?

Amit D
Amit D
Updated on 11-Mar-2026 1K+ Views

Here’s how you can get objects by ID Selector (#id), by Class Selector (.class), by Tag, and Attribute (.attr()).Get Object by Class SelectorExampleThe element class selector selects all the elements which match with the given class of the elements.           jQuery Selector                          $(document).ready(function() {                 $(".big").css("background-color", "yellow");          });                                  This is first division ...

Read More

How to traverse Data Object Model (DOM) nodes using jQuery?

David Meador
David Meador
Updated on 11-Mar-2026 483 Views

jQuery traversing is used to find elements based on what is their relation twith other elements. You need to begin with one selection and move ahead till you the reach the elements you want.jQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in a document randomly as well as in sequential method.Let’s filter out the elements by traversing. The filter( selector ) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s).ExampleThe selector can be written using any ...

Read More

What is the difference between jQuery.map() and jQuery.grep() Functions in jQuery?

David Meador
David Meador
Updated on 11-Mar-2026 632 Views

The jQuery map function translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements. The grep() function is used to find an element of an array. The difference is we use $.grep to filter an array and $.map to apply a function to each item in the array.jQuery map functionThe map method translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements.The following are the parameters of jQuery.map() method:callback − ...

Read More

What is the difference between jQuery.map() and jQuery.each() Functions in jQuery?

David Meador
David Meador
Updated on 11-Mar-2026 444 Views

jQuery map functionThe map method translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements.ExampleYou can try to run the following code to learn how to work with jQuery.map() method:           jQuery Map Method                              $(document).ready(function(){                         var mappedItems = $("li").map(function (index) {                var replacement = $("").text($(this).text()).get(0); ...

Read More

What is the difference between jQuery.children( ) and jQuery.siblings( ) in jQuery?

David Meador
David Meador
Updated on 11-Mar-2026 498 Views

jQuery children() methodThe children( [selector] ) method gets a set of elements containing all of the unique immediate children of each of the matched set of elements.Here is the description of all the parameters used by this method −selector − This is an optional argument to filter out all the childrens. If not supplied then all the childrens are selected.ExampleYou can try to run the following code to learn how to work with jQuery children() method:           jQuery children() method                          $(document).ready(function(){     ...

Read More
Showing 6951–6960 of 8,010 articles
« Prev 1 694 695 696 697 698 801 Next »
Advertisements