React Bootstrap Ribbon

It's been a while since the last release. And because of the big improvements I decided to skip v2 and v3, so we are now at v4. 😏
You think I'm cheating? The actual reason I call it v4 is, because it's now compatible with Bootstrap 4. ^^

Here is what's new:

• Compatible with Bootstrap 4 🥳
• Reduced custom CSS
• Better customization
• Updated build tools

Reduced custom CSS

I almost removed all custom CSS and used Bootstrap's utility classes where it was possible. There are only two things I couldn't do: the group separation border and the background behind the group titles.

So, this is what is left:

.ribbon-col:not(:last-child) .ribbon-group {
    box-shadow: inset -1px 0 1px rgba(0,0,0,.1);
}

.ribbon-group-title {
    background-color: rgba(0,0,0,.1);
}

Pretty compact, huh? That's how it was before:

.row-2px { margin-left: -2px; margin-right: -2px;}.row-2px-col { padding-left: 2px; padding-right: 2px;}.row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}.ribbon { background-color: #eee; margin-bottom: 4px; border-radius: 4px;}.ribbon-col { border-right: 1px solid #ddd;}.ribbon .ribbon-col:last-child { border-right: none;}.ribbon-group { padding-bottom: 24px;}.ribbon-group-content, .ribbon-group-title { padding: 4px;}.ribbon-icon { font-size: 2em; height: 34px; min-width: 34px; text-align: center;}.ribbon-icon-small { font-size: 1em; height: 16px; min-width: 16px; text-align: center;}.ribbon-group-title { position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: 0; background-color: #ddd; text-align: center;}.ribbon .ribbon-col:first-child .ribbon-group-title { border-radius: 0 0 0 4px; left: 2px;}.ribbon .ribbon-col:last-child .ribbon-group-title { border-radius: 0 0 4px; right: 2px;}.mobile-ribbon-item { display: none;}.mobile-ribbon-item.active { display: block;}

I had to compress it, to avoid blowing up this ReadMe.

Better customization

By reducing the custom CSS, it's now much easier to customize the Ribbon design by just theming Bootstrap. Because the Ribbon is now using all default styles of Bootstrap.

Are you looking for nice Bootstrap themes or want to design your own? You should checkout Colorganize Web Themes then!

React Bootstrap Ribbon

Get a Microsoft inspired Ribbon menu for your React app. It uses Bootstrap controls.

React Bootstrap Ribbon

Get a Microsoft inspired Ribbon menu for your React app. It uses Bootstrap controls.