Bootstrap CSS Class: W-100 - v

Mobile menu

• Products
• UI libraries
• How it works
• Pricing

Sign In Try Demo

Shuffle's Editors

Tailwind Editor

An online editor for Tailwind CSS

Bootstrap Editor

An online editor for Bootstrap

Material-UI Editor

An online editor for Material-UI

Bulma Editor

An online editor for Bulma CSS

Next.js Editor

Publish code in JSX or TSX in no time

Custom Library

Upload your favorite UI library

Combine elements and styles to create an entirely new UI Library!

Try UI Library Creator →

Supporting tools

Shuffle Assistant

Chat-based builder fuelled by AI

Alternatives

Create multiple layouts at once

Shuffle Layout!

One million layouts to start

SVG Pattern Generator

Generate SVG patterns in one click

Extension for VSC and Cursor

Improve the project in your favorite IDE

Plans

Single License

Perfect for solo projects

For Teams

Best for collaborative teams

Shuffle’s design systems

Bootstrap Components

Browse 3,800+ UI components grouped by category

Front-end UI libraries

Browse 80+ UI libraries available in the Shuffle Editor

Design Inspirations

An infinite wall of UI components for quick inspiration

Templates for popular industries

We've created a few templates so you can see what you can build

Bootstrap

• Bootstrap templates
• Bootstrap CSS classes list

Most popular ui libraries

Flex

Landing Library

Zanrly

Landing Library

Saturn

Landing Library

Flaro

Landing Library

Gradia

Landing Library

Basko

Landing Library

Artemis

Dashboard Library

Vendia

E-commerce Library

• Products
  • Tailwind Editor
  • Bootstrap Editor
  • Material-UI Editor
  • Bulma Editor
  • React Editor
  • SVG Pattern Generator
  • Extension for Visual Studio Code
  • Bootstrap templates
  • Bootstrap CSS classes list
• UI Components
  • Tailwind Components
  • Bootstrap Components
  • Material-UI Components
  • Bulma Components
• Front-end UI Libraries
• HTML Templates
• How it works
• Pricing

Log in Try Demo

Bootstrap CSS Classes

Generate with AI

Example prompts: SaaS Page, Minimalist E-commerce, Editorial Magazine

• General Bootstrap components Bootstrap templates Bootstrap editor

• Accordion accordion-body accordion-button accordion-collapse accordion-flush accordion-header accordion-item collapsed
• Alerts alert-danger alert-dark alert-dismissible alert-heading alert-info alert-light alert-link alert-primary alert-secondary alert-success alert-warning fade
• Badges badge badge-danger badge-dark badge-info badge-light badge-pill badge-primary badge-secondary badge-success badge-warning
• Borders border border-*-0 border-1 border-danger border-dark border-info border-light border-primary border-secondary border-success border-warning border-white rounded rounded-* rounded-0 rounded-1 rounded-2 rounded-3 rounded-bottom rounded-circle rounded-end rounded-pill rounded-start rounded-top
• Breadcrumbs breadcrumb breadcrumb-item
• Button Groups btn-group btn-group (nested) btn-group-lg btn-group-sm btn-group-vertical btn-toolbar
• Button Modifiers active button btn-block btn-lg btn-sm checkbox as button disabled button radio as button
• Buttons btn btn-close btn-close-white btn-danger btn-dark btn-info btn-light btn-link btn-outline-danger btn-outline-dark btn-outline-info btn-outline-light btn-outline-primary btn-outline-secondary btn-outline-success btn-outline-warning btn-primary btn-secondary btn-success btn-warning
• Cards card card bg-... text-... card-body card-columns card-deck card-footer card-group card-header card-header-pills card-header-tabs card-img-bottom card-img-overlay card-img-top card-link card-subtitle card-text card-title h*.card-header list-group middle image stretched-link
• Carousel carousel slide carousel-caption carousel-control-next carousel-control-next-icon carousel-control-prev carousel-control-prev-icon carousel-dark carousel-fade carousel-indicators carousel-inner carousel-item
• Collapse accordion collapse
• Colors bg-body bg-danger bg-dark bg-gradient bg-info bg-light bg-primary bg-secondary bg-success bg-transparent bg-warning bg-white link-danger link-dark link-info link-light link-primary link-secondary link-success link-warning text-danger text-dark text-info text-light text-primary text-secondary text-success text-warning text-white
• Custom Forms custom-checkbox custom-file custom-radio custom-range custom-select custom-switch
• Display d-*-block d-*-flex d-*-inline d-*-inline-block d-*-inline-flex d-*-none d-*-table d-*-table-cell d-grid d-lg-grid d-lg-table-row d-md-grid d-md-table-row d-print-... d-print-flex d-print-grid d-print-inline-flex d-print-table d-print-table-cell d-print-table-row d-sm-grid d-sm-table-row d-table-row d-xl-grid d-xl-table-row d-xxl-block d-xxl-flex d-xxl-grid d-xxl-inline d-xxl-inline-block d-xxl-inline-flex d-xxl-none d-xxl-table d-xxl-table-cell d-xxl-table-row
• Dropdowns dropdown dropdown (split) dropdown-divider dropdown-header dropdown-item dropdown-item disabled dropdown-item-text dropdown-menu dropdown-menu-dark dropdown-menu-end dropdown-menu-lg-end dropdown-menu-lg-start dropdown-menu-md-end dropdown-menu-md-start dropdown-menu-right dropdown-menu-sm-end dropdown-menu-sm-start dropdown-menu-start dropdown-menu-xl-end dropdown-menu-xl-start dropdown-toggle dropdown-toggle-split dropleft dropright dropup dropup (split)
• Figure figure figure-caption figure-img
• Flexbox align-content-*-around align-content-*-center align-content-*-end align-content-*-start align-content-*-stretch align-items-*-baseline align-items-*-center align-items-*-end align-items-*-start align-items-*-stretch align-self-*-baseline align-self-*-center align-self-*-end align-self-*-start align-self-*-stretch flex-*-column flex-*-column-reverse flex-*-grow-0 flex-*-grow-1 flex-*-nowrap flex-*-row flex-*-row-reverse flex-*-shrink-0 flex-*-shrink-1 flex-*-wrap flex-*-wrap-reverse flex-fill flex-lg-fill flex-md-fill flex-sm-fill flex-xl-fill flex-xxl-column flex-xxl-column-reverse flex-xxl-fill flex-xxl-grow-0 flex-xxl-grow-1 flex-xxl-nowrap flex-xxl-row flex-xxl-row-reverse flex-xxl-shrink-0 flex-xxl-shrink-1 flex-xxl-wrap flex-xxl-wrap-reverse justify-content-*-around justify-content-*-between justify-content-*-center justify-content-*-end justify-content-*-start justify-content-around justify-content-between justify-content-center justify-content-end justify-content-evenly justify-content-lg-around justify-content-lg-between justify-content-lg-center justify-content-lg-end justify-content-lg-evenly justify-content-lg-start justify-content-md-around justify-content-md-between justify-content-md-center justify-content-md-end justify-content-md-evenly justify-content-md-start justify-content-sm-around justify-content-sm-between justify-content-sm-center justify-content-sm-end justify-content-sm-evenly justify-content-sm-start justify-content-start justify-content-xl-around justify-content-xl-between justify-content-xl-center justify-content-xl-end justify-content-xl-evenly justify-content-xl-start justify-content-xxl-around justify-content-xxl-between justify-content-xxl-center justify-content-xxl-end justify-content-xxl-evenly justify-content-xxl-start order-*-# order-0 order-1 order-first order-last order-lg-0 order-lg-first order-lg-last order-md-0 order-md-first order-md-last order-sm-0 order-sm-first order-sm-last order-xl-0 order-xl-first order-xl-last order-xxl-0 order-xxl-first order-xxl-last
• Form Input Groups checkbox dropdown input-group input-group-append input-group-lg input-group-prepend input-group-sm radio segmented buttons
• Forms _default col-form-label col-form-label-lg col-form-label-sm disabled items form using the grid form-check form-check-inline form-check-input form-check-label form-control form-control-color form-control-file form-control-lg form-control-plaintext form-control-range form-control-sm form-floating form-group form-inline form-label form-select form-select-lg form-select-sm form-switch form-text input-group-text is-invalid is-valid readonly valid-feedback valid-tooltip
• Grid col col-* col-# (<576px) col-1 col-10 col-11 col-12 col-2 col-3 col-4 col-5 col-6 col-7 col-8 col-9 col-auto col-lg-# (≥992px) col-lg-1 col-md-# (≥768px) col-md-1 col-sm-# (≥576px) col-sm-1 col-xl-# (≥1200px) col-xl-1 col-xxl-1 container container-fluid container-sm contanier-lg contanier-md contanier-xl contanier-xxl g-0 g-lg-0 g-md-0 g-sm-0 g-xl-0 g-xxl-0 gap-0 gap-lg-0 gap-md-0 gap-sm-0 gap-xl-0 gap-xxl-0 gx-0 gx-0 gx-lg-0 gx-lg-0 gx-md-0 gx-md-0 gx-sm-0 gx-sm-0 gx-xl-0 gx-xl-0 gx-xxl-0 gy-xxl-0 nested columns no-gutters offset-*-# offset-0 offset-lg-0 offset-md-0 offset-xxl-0 order-# row row-cols-1 row-cols-auto row-cols-lg-1 row-cols-lg-auto row-cols-md-1 row-cols-md-auto row-cols-sm-1 row-cols-sm-auto row-cols-xl-1 row-cols-xl-auto row-cols-xxl-1 row-cols-xxl-auto
• Images img-fluid img-thumbnail
• Jumbotron jumbotron jumbotron-fluid
• List Group list-group list-group with badges list-group with d-flex list-group-item active list-group-item disabled list-group-item-action list-group-item-danger list-group-item-dark list-group-item-info list-group-item-light list-group-item-primary list-group-item-secondary list-group-item-success list-group-item-warning
• List group list-group-flush list-group-horizontal list-group-horizontal-lg list-group-horizontal-md list-group-horizontal-sm list-group-horizontal-xl list-group-horizontal-xxl list-group-item
• Media Objects d-flex align-self-center d-flex align-self-end d-flex align-self-start media nested media right aligned media
• Misc close embed-responsive initialism invisible overflow-auto overflow-hidden overflow-scroll overflow-visible pe-auto pe-none shadow shadow-lg shadow-none shadow-sm sr-only sr-only-focusable visible visually-hidden visually-hidden-focusable
• Modal modal modal fade modal-dialog-centered modal-lg modal-sm modal-xl
• Modals modal-body modal-content modal-dialog modal-dialog-scrollable modal-footer modal-fullscreen modal-fullscreen-lg-down modal-fullscreen-md-down modal-fullscreen-sm-down modal-fullscreen-xl-down modal-fullscreen-xxl-down modal-header modal-static modal-title
• Navbar collapse navbar-collapse nav-item nav-link navbar navbar fixed-bottom navbar fixed-top navbar sticky-top navbar with form navbar-brand navbar-collapse navbar-dark navbar-dark bg-dark navbar-expand-* navbar-expand-lg navbar-expand-md navbar-expand-sm navbar-expand-xl navbar-expand-xxl navbar-light navbar-nav navbar-text navbar-toggler navbar-toggler-icon
• Navs nav flex-column nav justify-content-* nav with flex utils nav-fill nav-justified nav-pills nav-pills with dropdown nav-tabs nav-tabs with dropdown nav.nav tab-content tab-pane ul.nav
• Pagination page-item active page-item disabled pagination pagination-lg pagination-sm
• Popover dismissible popover popovers
• Positioning align-* bottom-0 bottom-100 bottom-50 clearfix end-0 end-100 end-50 fixed-bottom fixed-top float-*-left float-*-none float-*-right float-end float-lg-end float-lg-none float-lg-start float-md-end float-md-none float-md-start float-none float-sm-end float-sm-none float-sm-start float-start float-xl-end float-xl-none float-xl-start float-xxl-end float-xxl-none float-xxl-start position-absolute position-relative position-static start-0 start-100 start-50 sticky-lg-top sticky-md-top sticky-sm-top sticky-top sticky-xl-top top-0 top-100 top-50 translate-middle
• Progress multiple progress-bar progress progress-bar progress-bar bg-* progress-bar with height progress-bar with label progress-bar-animated progress-bar-striped progress-bar-striped bg-*
• Scrollspy data-spy
• Sizing h-100 h-25 h-50 h-75 h-auto mh-100 min-vw-100 mw-100 w-100 w-100 w-25 w-50 w-75 w-auto
• Spacing m-1 / m-*-# m-auto m-lg-0 m-lg-auto m-md-0 m-md-auto m-n1 / m-*-n# m-sm-0 m-sm-auto m-xl-0 m-xl-auto m-xxl-0 m-xxl-auto mb-1 / mb-*-# mb-auto mb-lg-0 mb-lg-auto mb-md-0 mb-md-auto mb-sm-0 mb-sm-auto mb-xl-0 mb-xl-auto mb-xxl-0 mb-xxl-auto me-auto me-lg-0 me-lg-auto me-md-0 me-md-auto me-sm-0 me-sm-auto me-xl-0 me-xl-auto me-xxl-0 me-xxl-auto ml-1 / ml-*-# mr-1 / mr-*-# ms-auto ms-lg-0 ms-lg-auto ms-md-0 ms-md-auto ms-sm-0 ms-sm-auto ms-xl-0 ms-xl-auto ms-xxl-0 ms-xxl-auto mt-1 / mt-*-# mt-auto mt-lg-0 mt-lg-auto mt-md-0 mt-md-auto mt-sm-0 mt-sm-auto mt-xl-0 mt-xl-auto mt-xxl-0 mt-xxl-auto mx-1 / mx-*-# mx-auto mx-lg-0 mx-lg-auto mx-md-0 mx-md-auto mx-sm-0 mx-sm-auto mx-xl-0 mx-xl-auto mx-xxl-0 mx-xxl-auto my-1 / my-*-# my-auto my-lg-0 my-lg-auto my-md-0 my-md-auto my-sm-0 my-sm-auto my-xl-0 my-xl-auto my-xxl-0 my-xxl-auto p-1 / p-*-# p-lg-0 p-md-0 p-sm-0 p-xl-0 p-xxl-0 pb-0 pb-1 / pb-*-# pb-lg-0 pb-md-0 pb-sm-0 pb-xl-0 pb-xxl-0 pe-0 pe-lg-0 pe-md-0 pe-sm-0 pe-xl-0 pe-xxl-0 pl-1 / pl-*-# pr-1 / pr-*-# ps-0 ps-lg-0 ps-md-0 ps-sm-0 ps-xl-0 ps-xxl-0 pt-0 pt-1 / pt-*-# pt-lg-0 pt-md-0 pt-sm-0 pt-xl-0 pt-xxl-0 px-0 px-1 / px-*-# px-lg-0 px-md-0 px-sm-0 px-xl-0 px-xxl-0 py-0 py-1 / py-*-# py-lg-0 py-md-0 py-sm-0 py-xl-0 py-xxl-0
• Spinner spinner-border spinner-border text-* spinner-border-sm spinner-grow spinner-grow text-* spinner-grow-sm
• Tables caption-top table table-*-responsive table-active table-bordered table-borderless table-danger table-dark table-hover table-info table-light table-primary table-reflow table-responsive-xxl table-secondary table-sm table-striped table-success table-warning thead-dark thead-light
• Text font-italic font-weight-bold font-weight-bolder font-weight-light font-weight-lighter font-weight-normal text-*-center text-*-left text-*-right text-black-50 text-body text-capitalize text-decoration-none text-hide text-justify text-lowercase text-monospace text-muted text-nowrap text-truncate text-uppercase text-white-50
• Toast toast-body toast-header
• Toasts toast
• Tooltips tooltip
• Typography blockquote blockquote-footer blockquote-reverse display-# (1-4) display-1 display-2 display-3 display-4 display-5 display-6 dl-horizontal font-monospace fs-1 fs-2 fs-3 fs-4 fs-4 fs-5 fs-6 fs-lg-1 fs-md-1 fs-sm-1 fst-italic fst-normal fw-bolder fw-light fw-lighter fw-normal h1 h2 h3 h4 h5 h6 lead lh-1 lh-base lh-lg lh-sm list-inline list-unstyled text-break text-center text-decoration-line-through text-decoration-underline text-end text-lg-center text-lg-end text-lg-start text-md-center text-md-end text-md-start text-reset text-sm-center text-sm-end text-sm-start text-start text-wrap text-xl-center text-xl-end text-xl-end text-xl-end text-xl-start text-xl-start text-xl-start text-xxl-center text-xxl-end text-xxl-start

« All Bootstrap CSS classes Bootstrap CSS class .w-100 <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div> <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div> <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>

Preview

Are you tired of writing HTML by hand?

Check .w-100 in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

More Bootstrap CSS classes in Sizing category

.h-100 .w-100 .mh-100 .mw-100 .h-auto .h-25 .h-50 .h-75 .w-100 .w-25 .w-50 .w-75 .min-vw-100 .w-auto

Build websites faster with an AI Visual Editor

new

Products

• Tailwind Editor
• Bootstrap Editor
• Bulma Editor
• Material-UI Editor
• Next.js Editor
• Laravel Editor
• shadcn/ui Editor

UI Components

• Tailwind Components
• Bootstrap Components
• Material-UI Components
• Shadcn/ui Components
• Bulma Components
• Packs by Shuffle
• Design Inspirations

Extensions

• Visual Editor for Cursor
• Visual Editor for GitHub Copilot
• Visual Editor for Claude Code
• Visual Editor for Windsurf
• Components for VS Code

Support

• Docs
• FAQ
• Roadmap
• Contact
• Affiliate

Company

• About us
• Blog
• Terms of service
• Privacy policy
• Licenses

© 2025 Shuffle. All rights reserved.