Gutenberg vs Bootstrap 5 — porównanie klas CSS na przykładzie landing page

Opublikowano: 2025-09-05 przez admin

Budując stronę docelową (landing page), możemy wybrać różne podejścia: korzystać z edytora blokowego Gutenberga w WordPressie albo oprzeć layout na frameworku CSS, np. Bootstrap 5. Oba rozwiązania mają swoje mocne i słabe strony — Gutenberg ułatwia wizualne tworzenie treści, Bootstrap daje pełną kontrolę nad siatką i wyglądem.

Poniżej znajdziesz porównanie klas CSS obu metod na przykładzie prostego landing page składającego się z:

Nagłówka z logotypem i menu
Sekcji hero z CTA
Sekcji z trzema kolumnami (feature boxes)
Stopki z linkami

1. Struktura nagłówka

Gutenberg

<!-- wp:group {"align":"full","className":"site-header"} -->
<div class="wp-block-group alignfull site-header">
  <div class="wp-block-group__inner-container">
    <!-- wp:site-logo {"width":80} /-->
    <!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right"}} /-->
  </div>
</div>

Klasy kluczowe Gutenberga:

.wp-block-group — kontener grupy
.alignfull — szerokość 100%
.wp-block-navigation — nawigacja
.wp-block-site-logo — logo witryny

Bootstrap 5

<header class="container-fluid bg-light py-3">
  <div class="container d-flex justify-content-between align-items-center">
    <a href="#" class="navbar-brand">Logo</a>
    <nav class="d-flex gap-3">
      <a href="#" class="nav-link">Home</a>
      <a href="#" class="nav-link">About</a>
      <a href="#" class="btn btn-primary">Sign Up</a>
    </nav>
  </div>
</header>

Klasy Bootstrap:

.container-fluid, .container — siatka
.d-flex, .justify-content-between, .align-items-center — flexbox
.navbar-brand, .nav-link — gotowe style menu

2. Sekcja Hero z CTA

Gutenberg

<!-- wp:cover {"url":"hero.jpg","dimRatio":50,"className":"hero-section"} -->
<div class="wp-block-cover hero-section">
  <span class="wp-block-cover__background has-background-dim"></span>
  <img class="wp-block-cover__image-background" src="hero.jpg">
  <div class="wp-block-cover__inner-container">
    <!-- wp:heading {"textAlign":"center"} -->
    <h1 class="has-text-align-center">Twój produkt, Twój sukces</h1>
    <!-- /wp:heading -->
    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-buttons is-content-justification-center">
      <div class="wp-block-button">
        <a class="wp-block-button__link">Zacznij teraz</a>
      </div>
    </div>
  </div>
</div>

Bootstrap 5

<section class="bg-dark text-white text-center py-5" style="background-image:url('hero.jpg'); background-size:cover;">
  <div class="container">
    <h1 class="display-4">Twój produkt, Twój sukces</h1>
    <a href="#" class="btn btn-primary btn-lg mt-3">Zacznij teraz</a>
  </div>
</section>

3. Trzy kolumny (features)

Gutenberg

<!-- wp:columns -->
<div class="wp-block-columns">
  <!-- wp:column -->
  <div class="wp-block-column">
    <h3>Feature 1</h3>
    <p>Opis funkcji.</p>
  </div>
  <!-- /wp:column -->
  <div class="wp-block-column">
    <h3>Feature 2</h3>
    <p>Opis funkcji.</p>
  </div>
  <div class="wp-block-column">
    <h3>Feature 3</h3>
    <p>Opis funkcji.</p>
  </div>
</div>

Klasy Gutenberga:

.wp-block-columns — wrapper kolumn
.wp-block-column — pojedyncza kolumna

Bootstrap 5

<section class="container py-5">
  <div class="row text-center">
    <div class="col-md-4">
      <h3>Feature 1</h3>
      <p>Opis funkcji.</p>
    </div>
    <div class="col-md-4">
      <h3>Feature 2</h3>
      <p>Opis funkcji.</p>
    </div>
    <div class="col-md-4">
      <h3>Feature 3</h3>
      <p>Opis funkcji.</p>
    </div>
  </div>
</section>

Klasy Bootstrap:

.row + .col-md-4 — siatka kolumnowa

4. Stopka

Gutenberg

<!-- wp:group {"align":"full","className":"site-footer"} -->
<div class="wp-block-group alignfull site-footer">
  <div class="wp-block-group__inner-container">
    <!-- wp:paragraph -->
    <p>© 2025 Twoja Firma</p>
    <!-- /wp:paragraph -->
  </div>
</div>

Bootstrap 5

<footer class="container-fluid bg-light py-4 text-center">
  <p class="mb-0">© 2025 Twoja Firma</p>
</footer>

Porównanie wizualne — Gutenberg vs Bootstrap 5

Podgląd (HTML/CSS)

🔹 Gutenberg (WordPress Block Editor)

<div class="wp-block-group alignfull site-header">
  <div class="wp-block-group__inner-container">
    <div class="wp-block-site-logo">Logo</div>
    <nav class="wp-block-navigation">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#" class="wp-block-button__link">Sign Up</a>
    </nav>
  </div>
</div>

<div class="wp-block-cover hero-section">
  <span class="wp-block-cover__background has-background-dim"></span>
  <img class="wp-block-cover__image-background" src="hero.jpg">
  <div class="wp-block-cover__inner-container">
    <h1 class="has-text-align-center">Twój produkt, Twój sukces</h1>
    <div class="wp-block-buttons is-content-justification-center">
      <div class="wp-block-button">
        <a class="wp-block-button__link">Zacznij teraz</a>
      </div>
    </div>
  </div>
</div>

<div class="wp-block-columns">
  <div class="wp-block-column">
    <h3>Feature 1</h3>
    <p>Opis funkcji.</p>
  </div>
  <div class="wp-block-column">
    <h3>Feature 2</h3>
    <p>Opis funkcji.</p>
  </div>
  <div class="wp-block-column">
    <h3>Feature 3</h3>
    <p>Opis funkcji.</p>
  </div>
</div>

<div class="wp-block-group alignfull site-footer">
  <div class="wp-block-group__inner-container">
    <p>© 2025 Twoja Firma</p>
  </div>
</div>

🔹 Bootstrap 5

<header class="container-fluid bg-light py-3">
  <div class="container d-flex justify-content-between align-items-center">
    <a href="#" class="navbar-brand">Logo</a>
    <nav class="d-flex gap-3">
      <a href="#" class="nav-link">Home</a>
      <a href="#" class="nav-link">About</a>
      <a href="#" class="btn btn-primary">Sign Up</a>
    </nav>
  </div>
</header>

<section class="bg-dark text-white text-center py-5" style="background-image:url('hero.jpg'); background-size:cover;">
  <div class="container">
    <h1 class="display-4">Twój produkt, Twój sukces</h1>
    <a href="#" class="btn btn-primary btn-lg mt-3">Zacznij teraz</a>
  </div>
</section>

<section class="container py-5">
  <div class="row text-center">
    <div class="col-md-4">
      <h3>Feature 1</h3>
      <p>Opis funkcji.</p>
    </div>
    <div class="col-md-4">
      <h3>Feature 2</h3>
      <p>Opis funkcji.</p>
    </div>
    <div class="col-md-4">
      <h3>Feature 3</h3>
      <p>Opis funkcji.</p>
    </div>
  </div>
</section>

<footer class="container-fluid bg-light py-4 text-center">
  <p class="mb-0">© 2025 Twoja Firma</p>
</footer>

Kompletny HTML z porównaniem

Oto kompletny działający plik HTML, w którym landing page w Gutenbergu i w Bootstrapie są pokazane obok siebie w dwóch kolumnach. Możesz zapisać poniższy kod jako compare.html i otworzyć w przeglądarce.




  <meta charset="UTF-8">
  <title>Porównanie Gutenberg vs Bootstrap 5</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap 5 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f8f9fa;
    }
    .compare-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      padding: 20px;
    }
    .demo-box {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 12px;
      padding: 15px;
      overflow: hidden;
    }
    .demo-box h2 {
      font-size: 1.2rem;
      margin-bottom: 15px;
      text-align: center;
      background: #f1f3f5;
      padding: 8px;
      border-radius: 8px;
    }
    /* Gutenberg podgl&#261;d */
    .wp-block-group.alignfull {
      background: #f8f9fa;
      padding: 15px;
    }
    .wp-block-navigation a {
      margin: 0 8px;
      text-decoration: none;
      color: #0073aa;
    }
    .wp-block-cover {
      background: url('https://picsum.photos/1200/400') no-repeat center/cover;
      color: white;
      text-align: center;
      padding: 60px 20px;
    }
    .wp-block-buttons .wp-block-button__link {
      background: #0073aa;
      color: white;
      padding: 10px 20px;
      border-radius: 6px;
      text-decoration: none;
    }
    .wp-block-columns {
      display: flex;
      gap: 20px;
      padding: 20px;
    }
    .wp-block-column {
      flex: 1;
      background: #f1f3f5;
      padding: 15px;
      border-radius: 8px;
    }
    .site-footer {
      background: #f8f9fa;
      text-align: center;
      padding: 20px;
    }
    /* Bootstrap demo */
    .bootstrap-hero {
      background: url('https://picsum.photos/1200/400') no-repeat center/cover;
    }
  </style>



  <div class="compare-wrapper">

    <!-- Gutenberg Demo -->
    <div class="demo-box">
      <h2>Gutenberg (WordPress)</h2>

      <div class="wp-block-group alignfull site-header">
        <div class="wp-block-group__inner-container d-flex justify-content-between align-items-center">
          <div class="wp-block-site-logo">Logo</div>
          <nav class="wp-block-navigation">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#" class="wp-block-button__link">Sign Up</a>
          </nav>
        </div>
      </div>

      <div class="wp-block-cover hero-section">
        <div class="wp-block-cover__inner-container">
          <h1 class="has-text-align-center">Twój produkt, Twój sukces</h1>
          <div class="wp-block-buttons is-content-justification-center">
            <div class="wp-block-button">
              <a class="wp-block-button__link">Zacznij teraz</a>
            </div>
          </div>
        </div>
      </div>

      <div class="wp-block-columns">
        <div class="wp-block-column">
          <h3>Feature 1</h3>
          <p>Opis funkcji.</p>
        </div>
        <div class="wp-block-column">
          <h3>Feature 2</h3>
          <p>Opis funkcji.</p>
        </div>
        <div class="wp-block-column">
          <h3>Feature 3</h3>
          <p>Opis funkcji.</p>
        </div>
      </div>

      <div class="wp-block-group alignfull site-footer">
        <p>© 2025 Twoja Firma</p>
      </div>
    </div>

    <!-- Bootstrap Demo -->
    <div class="demo-box">
      <h2>Bootstrap 5</h2>

      <header class="container-fluid bg-light py-3">
        <div class="container d-flex justify-content-between align-items-center">
          <a href="#" class="navbar-brand">Logo</a>
          <nav class="d-flex gap-3">
            <a href="#" class="nav-link">Home</a>
            <a href="#" class="nav-link">About</a>
            <a href="#" class="btn btn-primary">Sign Up</a>
          </nav>
        </div>
      </header>

      <section class="bootstrap-hero text-white text-center py-5">
        <div class="container">
          <h1 class="display-4">Twój produkt, Twój sukces</h1>
          <a href="#" class="btn btn-primary btn-lg mt-3">Zacznij teraz</a>
        </div>
      </section>

      <section class="container py-5">
        <div class="row text-center">
          <div class="col-md-4">
            <h3>Feature 1</h3>
            <p>Opis funkcji.</p>
          </div>
          <div class="col-md-4">
            <h3>Feature 2</h3>
            <p>Opis funkcji.</p>
          </div>
          <div class="col-md-4">
            <h3>Feature 3</h3>
            <p>Opis funkcji.</p>
          </div>
        </div>
      </section>

      <footer class="container-fluid bg-light py-4 text-center">
        <p class="mb-0">© 2025 Twoja Firma</p>
      </footer>
    </div>

  </div>

Podsumowanie

Gutenberg używa własnych klas prefiksowanych wp-block-, co pozwala na szybkie budowanie layoutu w edytorze wizualnym. Style są w dużej mierze dostosowywane przez motyw.
Bootstrap 5 daje natychmiastowe, przewidywalne efekty dzięki systemowi siatki, klasom utility (.d-flex, .text-center, .py-5), gotowym komponentom (.btn, .navbar).

➡️ Dla dewelopera: Bootstrap daje pełną kontrolę i przewidywalność.
➡️ Dla marketera/kreatora treści: Gutenberg jest prostszy, bo działa w edytorze WordPressa.

Gutenberg vs Bootstrap 5 — porównanie klas CSS na przykładzie landing page

1. Struktura nagłówka

Gutenberg

Bootstrap 5

2. Sekcja Hero z CTA

Gutenberg

Bootstrap 5

3. Trzy kolumny (features)

Gutenberg

Bootstrap 5

4. Stopka

Gutenberg

Bootstrap 5

Porównanie wizualne — Gutenberg vs Bootstrap 5

Podgląd (HTML/CSS)

🔹 Gutenberg (WordPress Block Editor)

🔹 Bootstrap 5

Kompletny HTML z porównaniem

Podsumowanie

Powiązane wpisy

Półdedykowana strona WordPress z własnymi wtyczkami i Bootstrapem – dlaczego to rozwiązanie ma sens?

Informacja o cookies