Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/react-screen-sizes

Responsive React Screen Sizes built with Bootstrap 5. Check default pixel widths for different screen sizes supported by Bootstrap 5 responsiveness features.
https://github.com/mdbootstrap/react-screen-sizes

bootstrap bootstrap-template bootstrap-theme bootstrap5 css html jsx react react-bootstrap reactjs

Last synced: 26 days ago
JSON representation

Responsive React Screen Sizes built with Bootstrap 5. Check default pixel widths for different screen sizes supported by Bootstrap 5 responsiveness features.

Host: GitHub
URL: https://github.com/mdbootstrap/react-screen-sizes
Owner: mdbootstrap
License: other
Created: 2022-09-28T07:24:27.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2022-09-28T09:59:43.000Z (about 2 years ago)
Last Synced: 2024-09-28T16:21:13.578Z (about 1 month ago)
Topics: bootstrap, bootstrap-template, bootstrap-theme, bootstrap5, css, html, jsx, react, react-bootstrap, reactjs
Language: JavaScript
Homepage: https://mdbootstrap.com/docs/react/extended/screen-sizes/
Size: 263 KB
Stars: 0
Watchers: 5
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

Responsive React Screen Sizes built with Bootstrap 5. Check default pixel widths for different screen sizes supported by Bootstrap 5 responsiveness features.

Check out [React Bootstrap Screen Sizes Documentation](https://mdbootstrap.com/docs/react/extended/screen-sizes/) for detailed instructions & even more examples.

Bootstrap supports six default viewport widths. These presets can be changes or expanded upon, if you’re using our source Sass files.

![React Bootstrap Screen Sizes](https://mdbootstrap.com/img/Marketing/github/screen-sizes/basic.png)

Each width is a multiple of 12. They are adjusted to the most common device viewport sizes.

Make sure to check out the main [Breakpoints](https://mdbootstrap.com/docs/react/layout/breakpoints/) documentation for more customization options & media queries.

```scss
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );
```

## How to use?

1. Download MDB React - 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 extended Bootstrap documentation