Bootstrap

Bootstrap Stacked/Horizontal

What’s the difference between Stacked and Horizontal in Bootstrap?

1. Stacked Layout

  • Elements are stacked vertically, one on top of the other.

  • Default behavior on small screens (mobile).

  • Each item takes the full width of its container.

  • Common for forms, navbars, buttons, etc., on narrow screens.

Example: Stacked Form Inputs (Bootstrap 5)

html
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

2. Horizontal Layout

  • Labels and inputs (or elements) are aligned side-by-side in a row.

  • Used mostly for larger screens (tablets and desktops).

  • Uses Bootstrap grid classes to place label and input next to each other.

  • More compact, better for wide screens.

Example: Horizontal Form (Bootstrap 5)

html
<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

How does Bootstrap handle this responsively?

  • By default, Bootstrap stacks elements vertically on small screens.

  • On medium or larger screens (md breakpoint and above), you can switch to horizontal with the grid classes (col-sm-2, col-sm-10).

  • This ensures good usability on mobiles and a neat compact layout on desktops.

Summary:

Layout Type Description When to Use
Stacked Elements stacked vertically Small screens, mobile views
Horizontal Elements side-by-side in a row Medium and larger screens

If you want, I can help with:

  • More examples (forms, navbars, buttons)

  • How to customize breakpoints

  • Tips for responsive design with Bootstrap

Want me to whip up some code or a demo?

Ask ChatGPT

Related Posts

Bootstrap CSS Dropdown

. Basic CSS Dropdown Menu Structure HTML html CopyEdit <div class="dropdown"> <button class="dropbtn">Menu</button> <div class="dropdown-content">…

Leave a Reply

Your email address will not be published. Required fields are marked *