Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/bootstrap-square-buttons

Responsive Square Buttons built with Bootstrap 5. Black, disabled, full-width outline, social, block square buttons examples.
https://github.com/mdbootstrap/bootstrap-square-buttons

bootstrap bootstrap-buttons bootstrap-example bootstrap5 buttons responsive responsive-button resposive-design square square-buttons

Last synced: about 1 month ago
JSON representation

Responsive Square Buttons built with Bootstrap 5. Black, disabled, full-width outline, social, block square buttons examples.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-square-buttons
Owner: mdbootstrap
License: other
Created: 2021-08-13T13:36:59.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-01-28T10:55:37.000Z (almost 3 years ago)
Last Synced: 2024-09-27T16:20:58.394Z (about 2 months ago)
Topics: bootstrap, bootstrap-buttons, bootstrap-example, bootstrap5, buttons, responsive, responsive-button, resposive-design, square, square-buttons
Language: JavaScript
Homepage: https://mdbootstrap.com/docs/standard/extended/square-buttons/
Size: 951 KB
Stars: 3
Watchers: 5
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

Responsive Square Buttons built with Bootstrap 5. Black, disabled, full-width outline, social, block square buttons examples.

Check out [Bootstrap Square Buttons Documentation](https://mdbootstrap.com/docs/standard/extended/square-buttons/) for detailed instructions & even more examples.

## Basic example

![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/basic.png)

```html
Button
```

```css
.btn-square-md {
width: 100px !important;
max-width: 100% !important;
max-height: 100% !important;
height: 100px !important;
text-align: center;
padding: 0px;
font-size:12px;
}
```

## How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples

[Bootstrap Responsive square button:
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/black.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#black-button)

[Bootstrap Square button sizes:
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/responsive.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#responsive-button)

[Bootstrap Square button colors:
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/square.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#sizes)

[Bootstrap Square button outline:
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/colors.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#colors)

[Bootstrap Square button social:
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/outline.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#outline)

[Bootstrap Square button sample brands:
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/social.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#social)

[Bootstrap Square button disabled state:
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/disabled.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#disabled-state)

[Bootstrap Square button toggle states:
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/toggle.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#disabled-state)

___

## More extended Bootstrap documentation