How to put a link on a button with bootstrap?

Core concept: pair a link with a button

The above snippet may solve your problem at hand, but a more in-depth understanding of the interplay between Bootstrap buttons and links can level up your designs.

Breaking it down

• Stay simple: Avoid complex markup and inline JavaScript when a humble <a> tag does the job.
• Version control: Class names may change with every Bootstrap release. Cross-check with the Bootstrap version you are using.
• Accessibility is paramount: The role attribute explains to assistive technologies what the link will do.

Adding some color

• Inherit to fit in: Apply color: inherit to the button's link color aligns with your overall theme.
• Cues with icons: Along with text, include Bootstrap's glyphicon or fas fa-icons classes for more visual appeal.

Keeping it together

• Group therapy: Use btn-group to keep related buttons in one row.
• Real-time action: Attach the onclick event to a JavaScript function to enable dynamic execution.

Digging deeper

• Behaviour within forms: State type="button" to prevent inadvertant form submission.
• Wrapping <button> in <a>: It's permissible, but accessibility and semantics must not be compromised.
• Style warriors: If Bootstrap styles aren't asserting, check for theme-specific styles that may challenge the btn classes.

Going places

• Enriched button groups: Not just btn-group, also check out btn-toolbar and btn-group-vertical.
• Button-led components: Bootstrap's modal dialog can be invoked by a button.