2
0 Comments

Still using Bootstrap CSS? Here are 5 design tips to improve your UIs.

Bootstrap is an amazing CSS framework for those who struggle with design, css, or need to build something quickly.

Here are 5 design tips to improve the UIs your building with Bootstrap CSS.

1) Bring attention to alerts

Add dark borders and svg icons to draw user's attention.

Imgur

2) Tables don't have to match your database

HTML tables don't have to be a copy of your database structure. Remove column names, id's, and combine fields when it makes sense.

Imgur

3) Secondary buttons don't need a background color

Giving primary actions a background color and secondary actions no background color will establish a hierarchy of importance.

Imgur

4) Stop labeling everything!

Devs love to label values. Stop it! Display information as if it were a sentence in a book, not a key value pair.

Imgur

5) Shadows > Borders

Card borders often feel clunky. Shadows emphasize elements and give the page depth, making the element feel closer to the user.

Imgur

More Bootstrap design tips??

If you enjoyed this, consider checking out my new project - Better Bootstrap

There you will find a free book containing more Bootstrap design tips with code examples.

posted to Icon for group Developers
Developers
on July 1, 2022
Trending on Indie Hackers
How to acquire your first users for $0? User Avatar 34 comments AI Visibility Is the New SEO for Indie Makers User Avatar 17 comments Getting my first 100 users with $0: what actually worked User Avatar 14 comments Product-led Growth User Avatar 6 comments Vibe-coding is incredible. But here's where most founders hit a wall. User Avatar 2 comments Why your customers are churning (hint: it's not missing features) User Avatar 1 comment