Bootstrap List Classes - Bootstrap Tutorial 15

Publicado el: 02 diciembre 2019
en el canal de: ChidresTechTutorials

1,546

Notes for You:: Bootstrap List Classes - Bootstrap Tutorial 15

list-unstyled : removes bullets, left padding etc.
<ul class="list-unstyled">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

list-group & list-group-item :
list-group: unstyles the list, converts list items in to flex items, places them in a column etc.
list-group-item: adds border, padding to list items etc.
<ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item">Item</li>
</ul>

list-group, list-group-item & list-group-item-action :
list-group-item-action : removes styles from anchors
<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>
</ul>

list-inline & list-inline-item :
list-inline: unstyles the list etc.
list-inline-item: converts 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>
<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 Tutorial 16 - Bootstrap Table Related Classes | Bootstrap Tables
   • Bootstrap Table Classes - Bootstrap T...

Follow the link for previous video:
Bootstrap Tutorial 14 - Bootstrap Image Related Classes | Bootstrap Images
   • Bootstrap Image Classes - Bootstrap T...

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

Bootstrap 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

En esta página del sitio puede ver el video en línea Bootstrap List Classes - Bootstrap Tutorial 15 de Duración hora minuto segunda en buena calidad , que subió el usuario ChidresTechTutorials 02 diciembre 2019, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 1,546 veces y le gustó 34 a los espectadores. Disfruta viendo!

190