Strange padding in Bootstrap 5?

[wernste]

In my defense: I'm just getting started with Bootstrap. So please be patient with me!

My problem is that my test page looks messed up and completely different from the Bootstrap page.

For example, h1, the card, and the form have padding, but normal text does not. What am I doing wrong?

Here is the source code for this:

[abhishekkushwahaa]

Hi @wernste,

No worries at all — we all start somewhere! 😄

What you’re seeing is actually expected behavior in Bootstrap 5. Here’s why:

1. Heading and Components Have Default Spacing

   • Elements like <h1>, .card, .form-control, and other Bootstrap components come with built-in padding or margin defined in Bootstrap’s CSS.
   • Normal text (like plain <p> or <span>) does not have extra padding or margin by default — Bootstrap leaves it up to you to add spacing as needed using utility classes like mb-3, p-2, etc.

2. Bootstrap Utility Classes Are Your Friend

   • If you want consistent spacing for normal text, you can use Bootstrap spacing utilities:

     <p class="mb-3">This is some text with bottom margin.</p>
     <p class="p-2 bg-light">This paragraph has padding and a background.</p>

   • These utilities work on all elements and let you mimic the spacing you see on Bootstrap examples.

3. Inspect the Examples Carefully

   • Bootstrap examples often wrap elements in containers (.container, .row, .col) which also apply padding/margin.
   • Make sure your layout uses the same structure, or else spacing may look “off”.

In short: Nothing is broken — headings and components just have default spacing, while plain text does not. Use Bootstrap spacing utilities to get consistent padding/margin wherever you need it.