React Bootstrap — Badges, Breadcrumbs, and Buttons

Image for post
Image for post
Photo by Cristina Gottardi on Unsplash

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap’s badges, breadcrumbs, and buttons in our React app.

Badges

Badges are components that lets us display some text in a box beside other text.

It’s sized according to the neighboring text.

For instance, we can use it by writing:

We have the variant prop that lets us change the background color.

The size of it will match the neighboring text.

Contextual Variations

We can change the variant prop to style the badge the way we want.

For example, we can write:

We change the variant to those values so that they have different background colors.

Pill

Also, we can change the style to the pill style, which is rounder than the regular badge.

For example, we can write:

We add the pill prop so that we get rounded badges.

Breadcrumbs

We can add breadcrumbs to show the navigation hierarchy with separators separating each level.

For example, we can write:

We have the Breadcrumb component with Breadcrumb.Item components inside.

href has the URL to go when we click on the breadcrumb link.

Buttons

React Bootstrap provides us with multiple styles of buttons.

We can change the style with the variant prop.

For example, we can write:

We have different varieties of buttons with different background colors.

variant has the background color of the button.

If the variant is link , then it’s displayed as a link.

Outline Buttons

We can make buttons have a light background and colored outline with the outline- prefix for the variant prop.

For example, we can write:

Now we get buttons with the outline colored and white background.

Button Tags

We can change the tag that a Button is rendered as with the as prop.

For instance, we can write:

We have the as prop to render the component we the input element.

Then we specified the type prop for the input field type.

The value has the text content of the button.

Image for post
Image for post
Photo by Bruce Hong on Unsplash

Conclusion

Badges let us display a small piece of text beside another piece of text.

Also, breadcrumbs let us display navigation hierarchy with links.

And buttons can be styled and rendered in various ways.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store