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.

on July 1, 2022