mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 02:24:19 +02:00
Code Issues Releases Wiki Activity

New grid gap, tweak form layouts in docs

Browse Source
This commit is contained in:
Mark Otto
2025-04-14 10:00:21 -07:00
parent f3f3ef99e4
commit 509332ee40
3 changed files with 149 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_config.scss
View File

@@ -50,7 +50,7 @@ $breakpoints: (
// Set the number of columns and specify the width of the gutters. // Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default; $grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default; $grid-gutter-width: 1.25rem !default;
$grid-row-columns: 6 !default; $grid-row-columns: 6 !default;
// Grid containers // Grid containers

5
scss/layout/_grid.scss
View File

@@ -69,11 +69,14 @@
} }
// mdo-do: add to utilities? // mdo-do: add to utilities?
.g-col-auto { .col-auto {
grid-column: auto/auto; grid-column: auto/auto;
} }
// mdo-do: add to utilities? // mdo-do: add to utilities?
.grid-cols-2 {
--#{$prefix}columns: 2;
}
.grid-cols-3 { .grid-cols-3 {
--#{$prefix}columns: 3; --#{$prefix}columns: 3;
} }

210
site/src/content/docs/forms/layout.mdx
View File

@@ -30,36 +30,70 @@ Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or
## Form grid ## Form grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. **Requires the `$enable-grid-classes` Sass variable to be enabled** (on by default). More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
<Example code={`<div class="row"> <Example code={`<div class="grid grid-cols-2">
<div class="col"> <div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name"> <input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div> </div>
<div class="col"> <div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name"> <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div> </div>
</div>`} /> </div>`} />
## Gutters ## Gutters
By adding [gutter modifier classes]([[docsref:/layout/gutters]]), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default). By adding [gutter modifier classes]([[docsref:/layout/gutters]]), you can have control over the gutter width in as well the inline as block direction.
<Example code={`<div class="row g-3"> <Example code={`<div class="grid grid-cols-2 gap-3">
<div class="col"> <div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name"> <input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div> </div>
<div class="col"> <div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name"> <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div> </div>
</div>`} /> </div>`} />
More complex layouts can also be created with the grid system. More complex layouts can also be created with the grid system.
<Example code={`<form class="row g-3"> <Example code={`<form class="grid">
<div class="col-md-6"> <div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label> <label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4"> <input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label> <label for="inputPassword4" class="form-label">Password</label>
@@ -108,16 +142,48 @@ Create horizontal forms with the grid by adding the `.row` class to form groups
At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the `padding-top` on our stacked radio inputs label to better align the text baseline. At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
<Example code={`<form> <Example code={`<form>
<div class="row mb-3"> <div class="grid mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3"> <input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="grid mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="grid mb-3">
<legend class="col-sm-2 col-form-label pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div> </div>
</div> </div>
<div class="row mb-3"> </fieldset>
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> <div class="grid mb-3">
<div class="col-sm-10"> <div class="col-sm-10 col-start-md-3">
<input type="password" class="form-control" id="inputPassword3"> <div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div> </div>
</div> </div>
<fieldset class="row mb-3"> <fieldset class="row mb-3">
@@ -160,49 +226,55 @@ At times, you maybe need to use margin or padding utilities to create that perfe
Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`. Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
<Example code={`<div class="row mb-3"> <Example code={`<div class="grid mb-3">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label> <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm"> <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div> </div>
<div class="row mb-3"> </div>
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label> <div class="grid mb-3">
<div class="col-sm-10"> <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label"> <div class="col-sm-10">
</div> <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div> </div>
<div class="row"> </div>
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label> <div class="grid mb-3">
<div class="col-sm-10"> <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg"> <div class="col-sm-10">
</div> <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>`} /> </div>
</div>`} />
## Column sizing ## Column sizing
As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row`. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-sm-7`. As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-sm-8`.
<Example code={`<div class="row g-3"> <Example code={`<div class="grid">
<div class="col-sm-7"> <div class="col-sm-8">
<input type="text" class="form-control" placeholder="City" aria-label="City"> <input type="text" class="form-control" placeholder="City" aria-label="City">
</div> </div>
<div class="col-sm"> <div class="col-sm-2">
<input type="text" class="form-control" placeholder="State" aria-label="State"> <input type="text" class="form-control" placeholder="State" aria-label="State">
</div> </div>
<div class="col-sm"> <div class="col-sm-2">
<input type="text" class="form-control" placeholder="Zip" aria-label="Zip"> <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
</div> </div>
</div>`} /> </div>`} />
## Auto-sizing ## Auto-sizing
The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents. The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
<Example code={`<form class="row gy-2 gx-3 align-items-center"> <Example code={`<form class="d-flex gap-3 align-items-center">
<div class="col-auto"> <div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label> <label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe"> <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInputGroup">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
</div> </div>
<div class="col-auto"> <div class="col-auto">
<label class="visually-hidden" for="autoSizingInputGroup">Username</label> <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
@@ -235,10 +307,16 @@ The example below uses a flexbox utility to vertically center the contents and c
You can then remix that once again with size-specific column classes. You can then remix that once again with size-specific column classes.
<Example code={`<form class="row gx-3 gy-2 align-items-center"> <Example code={`<form class="d-flex gap-3 align-items-center">
<div class="col-sm-3"> <div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputName">Name</label> <label class="visually-hidden" for="specificSizeInputName">Name</label>
<input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe"> <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label> <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>