Bootstrap media queries: Tipps für Bootstrap 3, 4 & 5

04.12.2020
von Meike Müller
Tipps & Tricks
Banner

Bootstrap media queries cheat sheet für Bootstrap 3 & Bootstrap 4 & Bootstrap 5. Tipps und Tricks zum Thema Bootstrap von den Webentwicklern der EXWE GmbH.

 

Lesezeit 4 min

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Bootstrap 5 (neueste Version)

@media (min-width: 576px){}
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 1200px){}
@media (min-width: 1400px){}

Bootstrap 4

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Bootstrap 3

 @media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
 

 

 

 


FAQ rund um Bootstrap 

Zum Abschluss dieses Beitrags widmen wir uns noch einigen Fragen, die aufgekommen sind. Solltest du selber noch Fragen zu der Webentwicklung oder allgemein haben, stehen wir von EXWE gerne telefonisch zur Verfügung und beantworten dir deine Fragen.

  • Was ist Bootstrap?

    Bootstrap ist ein populäres Front-End-Web-Framework, das Entwicklern dabei hilft, responsive und mobile-first Webseiten und Anwendungen zu erstellen. Es bietet eine Vielzahl von CSS- und JavaScript-Komponenten, die vorgefertigt sind und schnell und einfach in Webprojekte integriert werden können. Bootstrap wurde ursprünglich von Twitter entwickelt und ist heute eines der am häufigsten verwendeten Frameworks für die Entwicklung von Webseiten und Anwendungen.

     

     
    Vorschau YouTube Video
  • Was macht man mit Bootstrap?

    Mit Bootstrap können Webentwickler schnell und einfach responsive und mobile-first Webseiten und Anwendungen erstellen. Es bietet eine Vielzahl von vorgefertigten CSS- und JavaScript-Komponenten, die sich leicht in ein Webprojekt integrieren lassen. Zu diesen Komponenten zählen unter anderem Menüs, Formulare, Buttons, Tabellen und vieles mehr. Durch die Verwendung von Bootstrap können Entwickler Zeit und Mühe sparen, indem sie auf bereits vorhandene, getestete und stabile Codebasen zurückgreifen können, anstatt alles von Grund auf neu zu erstellen.

  • Welche Erweiterungen gibt es für Bootstrap?

    Es gibt zahlreiche Erweiterungen und Plug-ins für Bootstrap, die es ermöglichen, das Framework noch weiter an die individuellen Bedürfnisse eines Projekts anzupassen. Einige Beispiele für solche Erweiterungen sind:

    • Bootstrap Datepicker: Dieses Plug-in ermöglicht es, einfach und intuitiv Datumsauswahlen in Formularen zu implementieren.
    • Bootstrap Colorpicker: Dieses Plug-in bietet eine benutzerfreundliche Möglichkeit, Farbauswahlen in Webprojekten zu integrieren.
    • Bootstrap Select: Dieses Plug-in verbessert die Standard-Dropdown-Menüs von Bootstrap und bietet zusätzliche Funktionen wie Live-Suche und Opt-Groups.
    • Bootstrap File Input: Dieses Plug-in erweitert die Standard-Datei-Upload-Funktion von Bootstrap und bietet zusätzliche Features wie Drag-and-Drop-Unterstützung und Dateiauswahl mit Vorschaubildern.

    Dies sind nur einige Beispiele von vielen möglichen Erweiterungen und Plug-ins für Bootstrap. Es lohnt sich, im Internet nach weiteren Optionen zu suchen und zu überlegen, welche Erweiterungen für das eigene Projekt am besten geeignet sind.

  • Ist Bootstrap kostenlos?

    Ja, Bootstrap ist kostenlos und Open-Source. Es wurde ursprünglich von Twitter entwickelt und wird heute unter der MIT-Lizenz veröffentlicht, was bedeutet, dass es frei verwendet, verändert und weitergegeben werden kann. Entwickler können also kostenlos auf das Framework und alle dazugehörigen Ressourcen zugreifen und es in ihren Projekten verwenden.

  • Warum sollte ich Bootstrap benutzen?

    Es gibt mehrere Gründe, warum man Bootstrap verwenden sollte:

    • Zeitersparnis: Bootstrap bietet eine Vielzahl von vorgefertigten CSS- und JavaScript-Komponenten, die schnell und einfach in ein Webprojekt integriert werden können. Entwickler müssen also nicht alles von Grund auf neu erstellen, sondern können auf eine stabile und getestete Codebasis zurückgreifen.
    • Responsive Design: Bootstrap ist von Grund auf für responsive und mobile-first Webdesign entwickelt worden. Es bietet eine Reihe von CSS-Klassen und -Utilities, die es einfach machen, Webseiten und Anwendungen so zu gestalten, dass sie auf verschiedenen Geräten und Bildschirmgrößen gut aussehen und funktionieren.
    • Beliebtheit und Unterstützung: Bootstrap ist eines der am häufigsten verwendeten Front-End-Web-Frameworks und hat eine große und aktive Entwicklercommunity. Dies bedeutet, dass es eine Vielzahl von Ressourcen und Tutorials gibt, auf die man zurückgreifen kann, wenn man Fragen hat oder Unterstützung benötigt. Es ist auch einfach, andere Entwickler zu finden, die mit Bootstrap vertraut sind, falls man externe Hilfe benötigt.
    • Flexibilität: Obwohl Bootstrap viele vorgefertigte Komponenten bietet, lässt es sich auch leicht an individuelle Bedürfnisse anpassen. Entwickler können zum Beispiel bestimmte Komponenten des Frameworks ignorieren oder eigene CSS- und JavaScript-Code-Schnipsel hinzufügen, um das Framework an die spezifischen Anforderungen des Projekts anzupassen.
  • Welche Funktionen hat Bootstrap?

    Bootstrap ist ein Front-End-Web-Framework, das Entwicklern dabei hilft, responsive und mobile-first Webseiten und Anwendungen zu erstellen. Es bietet eine Vielzahl von vorgefertigten CSS- und JavaScript-Komponenten, die sich leicht in ein Webprojekt integrieren lassen. Zu den Funktionen von Bootstrap zählen unter anderem:

    • Eine grid-basierte Layout-System, das es einfach macht, responsive und mobile-first Designs zu erstellen.
    • Eine Vielzahl von CSS-Klassen und -Utilities, die es ermöglichen, schnell und einfach typografische Stile, Farben, Ränder und andere Design-Elemente zu definieren.
    • Eine Reihe von vorgefertigten CSS- und JavaScript-Komponenten, wie Menüs, Formulare, Buttons, Tabellen und vieles mehr.
    • Integration mit anderen JavaScript-Bibliotheken und -Plug-ins, wie zum Beispiel jQuery und Popper.js.
    • Unterstützung für die neuesten Webstandards, wie zum Beispiel Flexbox und CSS-Grid.
    • Eine gut dokumentierte und aktive Entwicklercommunity, die Ressourcen und Tutorials bereitstellt und bei Fragen und Problemen hilft.

Was ist dein Projekt? Wenn du uns darüber erzählen möchtest, rufen wir dich zurück!

 
Meike
Meike
vom 04.12.2020

Hallo, mein Name ist Meike. Ich betreue das EXWE Backoffice und bin für unsere Social-Media Kanäle zuständig. All unsere Artikel sollen dir das Leben erleichtern und eine Entscheidungshilfe sein. Trotzdem kann es mal vorkommen, dass etwas unklar bleibt, daher: Wenn du Fragen zu diesem Artikel hast erreichst du mich ganz einfach unter +49 231 93149827

Du möchtest immer am Zenit der Technik bleiben? Keine News und Blogbeiträge mehr verpassen.
Zu diesem Thema haben wir außerdem noch folgende interessante Beiträge aus unserem Tech-Blog für dich
Facebook Gewinnspiele: Aufmerksamkeit für dein Unternehmen

Nutze unsere Tipss und Tricks zur Generierung von "Likes" bei Gewinnspielen auf deiner Facebook Unternehmensseite und optimiere dein Business!

Individuelle Softwareentwicklung für dein Unternehmen: Wir zeigen, wie es geht!

Was ist wenn Standardsoftware nicht mehr ausreicht? Eine speziell an deine Anforderungen ausgerichtete Individualsoftware kann dir hierbei helfen!

Was sagt Google PageSpeed wirklich aus?

Warum Google PageSpeed oft falsch interpretiert wird, was dir wirklich hilft deine Ladezeit zu optimieren und die optimale User Experience zu garantieren.