So verwenden Sie Bootstrap in WordPress (2026): 4 Methoden, Schritt für Schritt - DEUTSCH

In den meisten Bootstrap-in-WordPress-Tutorials werden Sie immer noch aufgefordert, einen Stylesheet-Link in header.php einzufügen und daneben jQuery zu laden. Beide Bewegungen sind falsch 2026. Bootstrap 5 jQuery als Abhängigkeit gelöscht, and editing header.php directly gets wiped the next time your theme updates. This guide shows the current way to do it, with code that still works after an update.

Schnelle Antwort: Für die meisten Websites, enqueue Bootstrap 5.3.8 through a CDN in your theme’s functions.php (about ten lines, no jQuery). Building a full custom theme? Start from a Bootstrap-based starter like Understrap instead. Just want Bootstrap components inside the block editor? Install a Bootstrap blocks plugin and skip the code entirely.

Zuletzt überprüft: Juni 2026. Bootstrap version (5.3.8) and code samples verified against the official docs.

What Bootstrap Actually Does (and What WordPress Already Handles)

Bootstrap is a free, Open Source front-end CSS framework. It ships a responsive grid, ready-made components (navbars, Karten, Modalitäten, Tasten), and utility classes for spacing and layout. You get all of that without writing much CSS by hand. It’s design and layout, nichts mehr.

WordPress is the content management system: Beiträge, Seiten, Benutzer, die Datenbank, the admin dashboard. It decides what content exists and where it lives. Bootstrap decides how that content looks on screen. They don’t overlap, which is exactly why they pair well, and also why WordPress never bundles Bootstrap for you. You have to bring it in yourself.

Here’s the thing people miss: this is a developer or designer decision, not a click-a-button feature. If you’re hand-coding a theme, Bootstrap saves you weeks. If you’d rather drag blocks around, you may not need a framework at all. Unser WordPress vs website builders guide is the better starting point in that case.

One more fact worth fixing right away. Bootstrap 5 removed jQuery. The JavaScript is now plain (vanilla) JS. If a tutorial tells you to load jQuery for Bootstrap to work, that tutorial is describing Bootstrap 4 oder älter. Skip it.

Methode 1: Add Bootstrap via CDN in functions.php (Empfohlen)

This is the right default for nearly everyone. Ein CDN (Netzwerk für die Bereitstellung von Inhalten, a set of servers that hosts files close to your visitors) serves Bootstrap, so you don’t store anything yourself. And you load it the WordPress way, durch enqueuing. That means registering a file so WordPress prints it in the right spot, with no edits to header.php at all.

Add this to your child theme’s functions.php. A child theme matters: edit the parent and your changes vanish on the next update.

function htg_enqueue_bootstrap() {
    wp_enqueue_style(
        'bootstrap',
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
        Array(),
        '5.3.8'
    );
    wp_enqueue_script(
        'bootstrap',
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
        Array(),
        '5.3.8',
        wahr
    );
}
add_action( 'wp_enqueue_scripts', 'htg_enqueue_bootstrap' );

Five things in that snippet earn their place:

• Array(), not array(‘jquery’). Bootstrap 5 has no jQuery dependency. Adding one loads code you don’t need.
• Das .bundle.min.js file includes Popper, the small library that positions dropdowns, tooltips, and popovers. Use the non-bundle file only if you skip those components.
• wahr at the end loads the script in the footer, so it doesn’t block your page from rendering.
• Das ‘5.3.8’ version string tells WordPress to cache-bust correctly when you upgrade later.
• wp_enqueue_scripts is the front-end hook. It won’t touch your admin area.

Speicher die Datei, reload your site, and view source. You should see the Bootstrap stylesheet and script printed automatically. To confirm the JavaScript runs, drop a Bootstrap accordion or modal onto a page and click it. If it animates, you’re done.

The CDN route also means Bootstrap arrives from servers near your visitor and is often already cached in their browser from another site. If page speed is your priority, that edge is worth understanding, and our breakdown of how CDN hosting affects load times explains the trade-offs in plain terms.

Methode 2: Host Bootstrap Locally (For Control and Privacy)

CDNs are convenient, but they hand a third party a record of your visitors’ IP-Adressen. For GDPR-sensitive sites in the EU, or anyone who wants zero external requests, hosting the files yourself is cleaner. You also stop depending on someone else’s uptime.

The steps:

• Laden Sie die herunter compiled Bootstrap 5.3.8 package from getbootstrap.com (das “compiled CSS and JS” herunterladen, not the source files).
• Drop bootstrap.min.css into your theme at /assets/css/ and bootstrap.bundle.min.js into /assets/js/.
• Change the two CDN URLs in the snippet above to local paths using get_template_directory_uri(), for example get_template_directory_uri() . ‘/assets/css/bootstrap.min.css’. Use get_stylesheet_directory_uri() instead if the files live in a child theme.

Everything else stays identical. The only thing you lose is the shared-cache benefit. The thing you gain is full ownership: no broken layout if a CDN has a bad day, and nothing leaking visitor data offsite.

Methode 3: Start From a Bootstrap Starter Theme

Methoden 1 und 2 bolt Bootstrap onto an existing theme. If you’re building a theme from scratch, don’t bolt anything. Start from a base that already wires Bootstrap into WordPress’s template structure for you.

Understrap is the long-running choice. It welds the classic Underscores starter (the bare-bones theme WordPress developers have used for years) to Bootstrap, with Sass already configured so you can recompile a custom build. WP Bootstrap Starter is the lighter, friendlier option for a first custom theme. Salbei by Roots sits at the advanced end: it uses Blade templating and a modern build pipeline, and it’s framework-agnostic, so you can run Bootstrap or swap it out.

The payoff is real. A starter theme hands you a working navbar, a comment template, Pagination, and WooCommerce hooks that already speak Bootstrap’s markup. You skip the tedious plumbing and write only the parts that make your design yours. The cost is a learning curve: you’ll need to be comfortable with Sass, a terminal, and recompiling assets.

Eine ehrliche Einschränkung. Before you commit to any starter, check its last update date on GitHub. A starter that hasn’t shipped a release in two years may still target Bootstrap 4 and its jQuery habits. That drops you right back into the outdated camp this guide is trying to get you out of.

Methode 4: Use a Bootstrap Blocks Plugin (No Code)

Not a developer? You can still get Bootstrap’s grid and components inside the standard WordPress block editor. Plugins wie Block Editor Bootstrap Blocks add Bootstrap-powered rows, Säulen, Tasten, and containers as native blocks. You build responsive layouts by dragging blocks, and the plugin enqueues Bootstrap behind the scenes.

This is the path for content editors and small-business owners who like Bootstrap’s look but never want to open functions.php. It’s also the only method that plays naturally with the block editor, since the other three assume you’re styling templates by hand.

Be realistic about the ceiling, obwohl. A blocks plugin gives you Bootstrap’s components, not the full framework freedom a developer gets from Methods 1 durch 3. If your goal is a pixel-exact custom design, Du wirst daraus herauswachsen. If you simply want clean, responsive sections without code, es erfüllt seinen Zweck. And if “no code” is really what you’re after, weigh it against an KI-WordPress-Builder. That route may reach a finished layout faster than learning Bootstrap classes at all.

Now Write Bootstrap Markup: The Grid in Practice

Loading Bootstrap is half the job. The other half is writing its classes into your pages, and most tutorials stop before they show you. If you used Methods 1 durch 3, you add markup inside your theme’s template files or in a Custom HTML block on any page or post. (Method 4’s plugin builds the markup for you, so you can skip this part.)

Bootstrap is built on a 12-column grid. Three nested classes drive it: a .container for the outer wrapper, a .row inside it, and .col elements for each column. Here’s a layout that stacks on phones and splits into 8 und 4 columns on tablets and up:

<div class ="Container">
  <div class ="row">
    <div class ="col-md-8">Main content</div>
    <div class ="col-md-4">Seitenleiste</div>
  </div>
</div>

Das col-md- Präfix is the responsive trigger. Below the medium breakpoint (768px), both columns go full width and stack. At 768px and wider, they sit side by side. Swap md for sm, lg, or xl to move where that switch happens. One line of class names replaces the media queries you’d otherwise hand-write.

Components work the same way. Copy the markup for a card, navbar, or modal straight from Bootstrap’s docs, paste it into your template, and the styles you enqueued apply right away. No extra setup per component.

The Conflict Nobody Warns You About

Here’s where most Bootstrap-in-WordPress projects go sideways. Your active theme already has its own CSS. When Bootstrap loads on top, the two fight over the same class names and base styles. Buttons look off. Spacing breaks. A layout that was fine yesterday collapses.

Three collisions cause almost all of it:

• The .container class. Many themes define their own .container with a different max width. Bootstrap redefines it, and whichever loads last wins. Layouts jump around as a result.
• Base resets. Bootstrap’s Reboot restyles raw elements like body, Überschriften, and lists. That can quietly override your theme’s typography.
• Double grids. If your theme already uses a grid (Flexbox or CSS Grid), Bootstrap’s grid stacks on top, and elements end up nested in two competing systems.

You have two clean fixes. The first is to scope Bootstrap: wrap the sections you want styled in a parent class (a common pattern names it bootstrap-iso). Then compile Bootstrap so its rules only apply inside that wrapper. It stops touching the rest of your theme. The second fix, often the smarter one, ist zu build a custom Bootstrap bundle. It imports only the parts you use, the grid and a couple of components, and leaves Reboot out. Less CSS, fewer collisions, faster pages. This is also why a starter theme (Methode 3) avoids the problem from the start: it’s built around Bootstrap, so nothing collides.

Which Method Should You Pick?

Match the method to what you’re actually building. Three common cases:

• You run a finished site on a third-party theme and want a few Bootstrap components. Use Method 1 (CDN enqueue) inside a child theme. Don’t reach for a starter theme; rebuilding your whole site to add a modal is overkill. If conflicts appear, scope Bootstrap as described above.
• You’re a developer building a custom theme from zero. Use Method 3 (Understrap or Sage). Enqueuing Bootstrap onto a blank _s theme by hand just recreates what Understrap already gives you, minus the tested WooCommerce and navbar templates.
• You’re a content editor or store owner who wants responsive layouts without code. Use Method 4 (a blocks plugin). Functions.php editing isn’t worth the risk for your use case. If you’re running a shop, pair it with hosting tuned for the job. Our notes on WordPress-E-Commerce-Hosting cover why a Bootstrap front end still needs a fast back end.

A privacy or compliance requirement overrides all three. If you can’t send visitor data to an external CDN, switch whichever method you chose to Method 2’s local hosting.

Häufig gestellte Fragen

Do I still need jQuery to use Bootstrap 5 in WordPress?

Nein. Bootstrap 5 dropped jQuery and runs on vanilla JavaScript. When you enqueue the script, leave the dependency array empty (Array()), not array(‘jquery’). Adding jQuery loads extra code your Bootstrap components never call. Only Bootstrap 4 and earlier needed it.

Is Bootstrap good for WordPress in 2026?

Ja, if you’re coding a theme or want consistent responsive components. Bootstrap’s grid and utilities cut development time and work across every modern browser without extra fixes. It’s less useful if you build with the block editor or a page builder, since those tools already handle responsive layout. Match it to how you actually work.

Does adding Bootstrap slow down a WordPress site?

Es kann, if you load the entire framework for two components. The full minified CSS and JS add real weight. Loading them from a CDN, deferring the script to the footer, and building a custom bundle with only the parts you use keeps the hit small. You can also load Bootstrap only where it’s needed: wrap the enqueue in a conditional like is_page() so it doesn’t ship on every URL. A bloated theme stacked on top of full Bootstrap is the actual speed problem, not Bootstrap by itself.

Can I use Bootstrap with the WordPress block editor?

Ja, through a plugin like Block Editor Bootstrap Blocks, which adds Bootstrap rows, Säulen, and buttons as native blocks. Hand-enqueuing Bootstrap (Methode 1) doesn’t expose its components inside the editor, so you’d be writing class names manually in custom HTML blocks. For editor-first workflows, the plugin route is the practical one.

Should I use a Bootstrap CDN or host the files locally?

Use the CDN for convenience and a shot at shared browser caching. Host locally if you have GDPR or privacy requirements, want zero external requests, or don’t want to depend on another network’s uptime. The code is nearly identical; you just swap the CDN URLs for get_template_directory_uri() paths to files inside your theme.

Get the Method Right, Not Just the Code

Bootstrap and WordPress fit together cleanly once you stop following 2018-era tutorials. Enqueue version 5.3.8 in a child theme, drop the jQuery dependency, and scope your styles so they don’t fight your theme. That covers the vast majority of real projects. Pick a starter theme only when you’re building from scratch, and a blocks plugin only when you’re staying out of code.

If this is part of a bigger build, a few related guides go deeper. Vergleichen Sie verwaltetes WordPress-Hosting in den USA for where to run a custom theme. And revisit whether you even need to code at all in our take on website builders versus WordPress. A framework only pays off when the rest of the stack, hosting included, can keep up with it.