Bootstrap Images and Lists

Level : Intermediate
Mentor: Shailendra Chauhan
Duration : 00:03:00

Responsive Images:

Responsive images automatically adjust their size to fit different screen sizes, ensuring a seamless experience across devices.

Example:

<img src="image.jpg" class="img-fluid" alt="Responsive Image"> 

Image Thumbnails:

Image thumbnails add a bordered and visually appealing style to images, making them suitable for galleries and collections.

Example:

<img src="thumbnail.jpg" class="img-thumbnail" alt="Thumbnail"> 

Aligning Images:

Bootstrap provides classes to align images within their containers, allowing for flexible layouts.

Example:

<img src="left-image.jpg" class="float-start" alt="Left Aligned">
<img src="right-image.jpg" class="float-end" alt="Right Aligned"> 

Picture:

The '<picture>' element allows for art direction in responsive design, serving different images based on screen conditions.

Example:

<img src="left-image.jpg" class="float-start" alt="Left Aligned">
<img src="right-image.jpg" class="float-end" alt="Right Aligned">  

Basic List Groups:

Basic List Groups are used to display a list of items in a well-organized manner. They are often used for navigation or content grouping.

Example:

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

Active State:

Active state highlights the currently selected item in a list group, providing visual feedback to the user.

Example:

<ul class="list-group">
  <li class="list-group-item active">Active Item</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

List Group With Linked Items:

This variation adds clickable links to list group items, making it suitable for navigation menus.

Example:

<div class="list-group">
  <a href="#" class="list-group-item">Link 1</a>
  <a href="#" class="list-group-item">Link 2</a>
  <a href="#" class="list-group-item">Link 3</a>
</div>

Disabled Item:

Disabling list group items makes them unclickable and visually indicates that they are not interactive.

Example:

<ul class="list-group">
  <li class="list-group-item disabled">Disabled Item</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

Flush / Remove Borders:

A flush list group removes the default borders and padding, giving it a clean, borderless appearance.

Example:

<ul class="list-group list-group-flush">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

Numbered List Groups:

Numbered list groups display items with sequential numbering, suitable for ordered lists.

Example:

<ol class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ol>

Horizontal List Groups:

Horizontal list groups display items side by side, creating a horizontal layout.

Example:

<div class="list-group list-group-horizontal">
  <a href="#" class="list-group-item">Item 1</a>
  <a href="#" class="list-group-item">Item 2</a>
  <a href="#" class="list-group-item">Item 3</a>
</div>

Contextual Classes:

Contextual classes allow you to apply different colors to list group items based on their meaning or status.

Example

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success Item</li>
  <li class="list-group-item list-group-item-warning">Warning Item</li>
  <li class="list-group-item list-group-item-danger">Danger Item</li>
</ul>

Link Items with Contextual Classes:

Combining contextual classes with linked list group items allows you to create a navigation menu with colored indicators.

Example:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Success Link</a>
  <a href="#" class="list-group-item list-group-item-warning">Warning Link</a>
  <a href="#" class="list-group-item list-group-item-danger">Danger Link</a>
</div>

List Group with Badges:

Badges can be added to list group items to display additional information, such as notifications or counts.

Example:

<ul class="list-group">
   <li class="list-group-item d-flex justify-content-between align-items-center">
     Item 1
     <span class="badge badge-primary badge-pill">3</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
     Item 2
     <span class="badge badge-secondary badge-pill">7</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
     Item 3
     <span class="badge badge-danger badge-pill">1</span>
   </li>
</ul>

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this