Close

Navigation sidebar with icons and badges

This is an example of a navigation sidebar with icons and badges, designed using CSS, HTML, and Bootstrap framework 4. The body of the form is given a style set of font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", font-size as .8125rem, font-weight as 400, line-height as 1.5385, font color as #333, text-align as left, and background-color as #eee. The information card has the styles of display as flex, word-wrap as break-word to allow breaking and wrapping long words onto the next line, background-color as #fff, border as 1px solid rgba(0, 0, 0, .125), and border-radius as .1875rem. The 'Ask Question' bar is given the styles of background-color as #007bff, font color as #fff, and border-radius as 1px. The badge is given the styles of font-size as 75%, font-weight as 500, line-height as 1, text-align as center, and border-radius as .125rem. The navigation items turn their background color to #f5f5f5, in a hover event. Source: https://bbbootstrap.com/snippets/bootstrap-navigation-sidebar-font-awesome-icons-and-badges-32247422

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.