Bootstrap List Classes - Bootstrap5 Tutorial 12

Pubblicato il: 25 settembre 2022
sul canale di: ChidresTechTutorials

967

Notes for You:: Bootstrap List Classes - Bootstrap5 Tutorial 12

list-unstyled: used to un-style the list i.e. used to remove bullets, left-padding etc.

<ul class="list-unstyled">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

list-group: used to un-style the list.
list-group-item: used to add some border, padding etc. to list items.

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

list-group-item-action: used to add some mouse over styles on entire anchor element
<ul class="list-group">
<a href="#" class="list-group-item list-group-item-action">Item</a>
<a href="#" class="list-group-item list-group-item-action">Item</a>
<a href="#" class="list-group-item list-group-item-action">Item</a>
<a href="#" class="list-group-item list-group-item-action">Item</a>
</ul>

list-inline: used to un-style the list.
list-inline-item: used to convert list items to inline-block
<ul class="list-inline">
<li class="list-inline-item">Item</li>
<li class="list-inline-item">Item</li>
<li class="list-inline-item">Item</li>
<li class="list-inline-item">Item</li>
</ul>

<ul class="list-inline">
<a href="#" class="list-inline-item">Item</a>
<a href="#" class="list-inline-item">Item</a>
<a href="#" class="list-inline-item">Item</a>
</ul>

List group item colors:
used to set background color to list items

list-group-item-primary
list-group-item-secondary
list-group-item-success
list-group-item-info
list-group-item-warning
list-group-item-danger
list-group-item-light
list-group-item-dark

<ul class="list-group">
<li class="list-group-item list-group-item-primary">Item</li>
<li class="list-group-item list-group-item-secondary">Item</li>
<li class="list-group-item list-group-item-success">Item</li>
<li class="list-group-item list-group-item-warning">Item</li>
<li class="list-group-item list-group-item-info">Item</li>
<li class="list-group-item list-group-item-danger">Item</li>
<li class="list-group-item list-group-item-dark">Item</li>
<li class="list-group-item list-group-item-light">Item</li>
</ul>

Note:
replace < with less-than symbol.
replace > with greater-than symbol.

=========================================

Follow the link for next video:
   • Bootstrap Table Classes - Bootstrap5 ...

Follow the link for previous video:
   • Bootstrap Image Classes - Bootstrap5 ...

=========================================

Bootstrap5 Tutorials Playlist:
   • Bootstrap5 Tutorials

Bootstrap4 Tutorials Playlist:-
   • Bootstrap4 Tutorials

=========================================
Watch my other useful tutorials:-

Dreamweaver Tutorials Playlist:-
   • Dreamweaver Tutorials

PHP Tutorials Playlist:-
   • PHP Tutorials

MySQL Tutorials Playlist:-
   • MySQL Tutorials

=========================================

Every video on my channel is made with Love and Hard work, So don't forget to Like, Comment & Share.
Please do Subscribe, Hit the bell icon & Enjoy Learning. It's FREE.

=========================================

Subscribe to our YouTube channel:-
   / chidrestechtutorials

Join as member of our YouTube channel:-
https://www.youtube.com/chidrestechtu...

Become our Patron:-
  / chidrestechtutorials

Visit our Website:-
https://www.chidrestechtutorials.com

Download our notes from Instamojo:-
https://chidrestechtutorials.myinstam...

Buy our products on Spring:-
https://chidres-tech-tutorials.creato...

=========================================
Follow us:-

Google My Business:-
https://chidrestechtutorials.business...

Google Blog:-
http://manjunathchidre.blogspot.com

LinkedIn:-
  / chidrestechtutorials

Facebook:-
  / chidrestechtutorials

Twitter:-
  / manjunathchidre

Tumblr:-
  / chidrestechtutorials

Pinterest:-
  / chidrestechtutorials

=========================================

Despite my inconsistent uploads; Thanks for being amazing learners and still sticking with me on YouTube.

=========================================
Hash Tags:-
#ChidresTechTutorials #Bootstrap #BootstrapTutorial #Bootstrap5

In questa pagina del sito puoi guardare il video online Bootstrap List Classes - Bootstrap5 Tutorial 12 della durata di ore minuti seconda in buona qualità , che l'utente ha caricato ChidresTechTutorials 25 settembre 2022, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 967 volte e gli è piaciuto 23 spettatori. Buona visione!

148,253

1.2K