Bootstrap does not document a built-in square-button class. Make one by combining a Bootstrap button variant with custom CSS that gives the control equal width and height, then tune its padding and alignment for the label or icon.
Does Bootstrap have a square-button class?
No dedicated square-button modifier appears in Bootstrap’s v5.3 Buttons documentation. Bootstrap provides the button foundation—such as .btn, color variants, outline styles, size modifiers, disabled states and toggle behavior—while the square dimensions are a layout choice you add in your own stylesheet.
As an Amazon Associate I earn from qualifying purchases.
The documentation currently identifies the v5.3 line as v5.3.8. The examples below use Bootstrap 5 button classes; confirm the relevant classes and markup against the documentation for the version installed in your project.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →How do I make a square button in Bootstrap?
Use a semantic <button>, select a Bootstrap variant, and add a project-specific class for the shape. Setting width and height to the same value creates the square; flex alignment centers its content.
#1 Best Overall
<button type="button" class="btn btn-primary btn-square">Save</button>.btn-square {
width: 6rem;
height: 6rem;
padding: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
}The 6rem dimensions are an illustrative starting point, not a Bootstrap default or a tested recommendation. Adjust the dimensions and padding to suit the label, type size and surrounding interface. A longer label may wrap or feel cramped; consider a larger square or a different button shape rather than shrinking text until it becomes hard to read.
Which Bootstrap style should the square use?
Choose a variant that communicates the action’s role in the interface, then keep the shape class separate. This makes it possible to change the button’s color treatment without duplicating the square-dimension rules.
- Use a standard variant such as
btn-primary,btn-secondary,btn-success,btn-danger,btn-warning,btn-info,btn-lightorbtn-darkwhere its visual meaning fits. - Use an outline variant when an outlined treatment suits the hierarchy.
- Use a text label when the action should be immediately clear. Do not rely on color alone to explain a button’s purpose.
Bootstrap documents its button classes and variants in its button guide. A shape class does not replace the chosen button variant or the control’s accessible name.
Recommended Free Tools
How can I make a responsive square button?
Set equal width and height at each breakpoint where the design changes. Keep both values matched, and check that the resulting control still fits its container.
.btn-square {
width: 4rem;
height: 4rem;
padding: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.btn-square {
width: 6rem;
height: 6rem;
}
}The dimensions and breakpoint here are examples, not universal recommendations. Review the smallest size in the actual interface: confirm that text remains legible, the control is usable, and the content does not overflow. If the label cannot fit comfortably, use a larger square or a responsive layout that allows the button to grow.
What should an icon-only square button include?
An icon can fit a square button neatly, but the glyph alone may not tell assistive technology—or every user—what the control does. Give an icon-only button an accessible name that describes its action, and preserve a visible keyboard-focus indicator.
Bootstrap’s base .btn class provides basic padding and content alignment, but it has a transparent background and border and does not itself supply explicit focus or hover styling. Bootstrap specifically advises defining explicit focus or focus-visible styles when using .btn on its own. A button variant supplies more styling, but keyboard users still need a visible focus state.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Bootstrap Icons provides a square glyph in SVG and icon-font forms; that is an icon, not a ready-made physical square button or a substitute for the CSS dimensions. See the Bootstrap Icons square glyph for the available forms.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Should the control be a button or a link?
Use a <button> for an action such as saving, opening a dialog or toggling a setting. Use an <a> when the control navigates to a destination. Bootstrap documents button styling for links and inputs too, but an anchor used to trigger in-page functionality should carry role="button"; choose the element that matches what the control does.
Rank #4
What is the best free approach?
For a Bootstrap project, the most direct approach is Bootstrap’s button component plus a small custom class for equal dimensions. It uses the existing button variants and keeps the square behavior under your control, without requiring a separate component library. A third-party example can be useful as a reference: MDBootstrap square-button examples include fixed and responsive sizing patterns. Their sample dimensions are examples, not universal design guidance.
There is no basis here for an objective ranking of free providers. When choosing between a custom class and copied component code, consider whether dimensions are fixed or responsive, whether content is text or icon-only, what accessibility handling is included, and whether the code’s license and dependencies suit your project. Bootstrap identifies its code as MIT licensed and its documentation as CC BY 3.0 on the documentation reference page; check the license of third-party code separately.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
