Bootstrap Images and Lists

Level : Intermediate

Mentor: Shailendra Chauhan

Duration : 00:05: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

Upto 60% OFF

Know More

Still have some questions? Let's discuss.