All Projects → Gigamick → bootstrap-tailwind-breakpoints

Gigamick / bootstrap-tailwind-breakpoints

Licence: Unlicense license
A tiny little thing that helps you keep track of your break points.

Programming Languages

HTML
75241 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to bootstrap-tailwind-breakpoints

loopple
Drag & drop dashboard builder
Stars: ✭ 180 (+847.37%)
Mutual labels:  bootstrap4, tailwind
create-nuxt-tailwind-app
[DEPRECATED] Use create-nuxt-app, they added full tailwindcss & purgecss support
Stars: ✭ 32 (+68.42%)
Mutual labels:  tailwind
ozPanel
daha tanıdık bir görüntüde directAdmin teması
Stars: ✭ 13 (-31.58%)
Mutual labels:  bootstrap4
vscode-powertools
A swiss army knife with lots of tools, extensions and (scriptable) enhancements for Visual Studio Code.
Stars: ✭ 44 (+131.58%)
Mutual labels:  bootstrap4
AngularPos
A real-time, simple web Point of Sale system written with Angular 12, Firebase (Cloud Firestore), Bootstrap 4 and PrimeNg
Stars: ✭ 67 (+252.63%)
Mutual labels:  bootstrap4
bootstrap4-ui-kit-for-indesign
Bootstrap 4 UI Kit for Adobe InDesign
Stars: ✭ 11 (-42.11%)
Mutual labels:  bootstrap4
vurtify
Laravel 8 boilerplate project with Fortify + Vue 3 + Bootstrap 5
Stars: ✭ 61 (+221.05%)
Mutual labels:  tailwind
startui-admin
StartUI - Free html admin dashboard template
Stars: ✭ 31 (+63.16%)
Mutual labels:  bootstrap4
discord-bootstrap-theme
Custom bootstrap theme
Stars: ✭ 13 (-31.58%)
Mutual labels:  bootstrap4
DevHelpBox
we are creating this community so that other developers can get benefits of it.
Stars: ✭ 35 (+84.21%)
Mutual labels:  bootstrap4
angular-material-starter-template
🍄 Angular 14 boilerplate that comes with Material-UI, Tailwind3, Purgecss, Jest & Cypress Support, Optimal project structure & Interceptor inspired from popular blogs, source map analyzer tools, husky, all pre-configured and much more...
Stars: ✭ 104 (+447.37%)
Mutual labels:  tailwind
tailwind-layouts
Collection of Tailwind Layouts
Stars: ✭ 53 (+178.95%)
Mutual labels:  tailwind
shopify-slater-tailwindcss
Shopify Starter Theme + TailwindCSS with PurgeCSS
Stars: ✭ 40 (+110.53%)
Mutual labels:  tailwind
react-social-network-v1
Simple React Social Network, built with React,Node,Express,MongoDB and Tailwind
Stars: ✭ 30 (+57.89%)
Mutual labels:  tailwind
lara8auth
This is a simple auth starter setup for laravel 8 projects using bootstrap and laravel fortify
Stars: ✭ 11 (-42.11%)
Mutual labels:  bootstrap4
hugo-lime
Hugo Lime is a business theme for GoHugo by https://uicard.io
Stars: ✭ 31 (+63.16%)
Mutual labels:  bootstrap4
tailwind-spotify
Spotify UI built using TailwindCSS and VueJS
Stars: ✭ 36 (+89.47%)
Mutual labels:  tailwind
datta-able-bootstrap-dashboard
Datta Able Bootstrap 4 admin template free version
Stars: ✭ 111 (+484.21%)
Mutual labels:  bootstrap4
AMS
Attendance management system made my me, which I use for taking attendance.
Stars: ✭ 13 (-31.58%)
Mutual labels:  bootstrap4
abdulmoqueet.github.io
My Professional Portfolio
Stars: ✭ 17 (-10.53%)
Mutual labels:  bootstrap4

Always know your screen size

Supremely simple but quite useful. Drag your browser in and out to see it working.

Just copy the code below into the body of any pages you're working on and you'll always know what break point / screen size you're currently working in.

BOOTSTRAP

<div class="position-fixed" style="z-index: 9999999">
    <span class="badge badge-warning d-inline-block d-sm-none">XS</span>
    <span class="badge badge-warning d-none d-sm-inline-block d-md-none">SM</span>
    <span class="badge badge-warning d-none d-md-inline-block d-lg-none">MD</span>
    <span class="badge badge-warning d-none d-lg-inline-block d-xl-none">LG</span>
    <span class="badge badge-warning d-none d-xl-inline-block">XL</span>
</div>

TAILWIND

<div class="fixed z-50 text-xs font-bold text-black p-2">
    <span class="sm:hidden rounded px-1 bg-yellow-400 p-1">XS</span>
    <span class="hidden sm:inline-block md:hidden rounded px-1 bg-yellow-400">SM</span>
    <span class="hidden sm:hidden md:inline-block lg:hidden rounded px-1 bg-yellow-400">MD</span>
    <span class="hidden lg:inline-block xl:hidden rounded px-1 bg-yellow-400">LG</span>
    <span class="hidden xl:inline-block rounded px-1 bg-yellow-400">XL</span>
</div>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].