هر گروه از فیلدهای فرم باید در a قرار گیرند<form> element. Bootstrap provides no default styling for the <form> element, but there are some powerful browser features that are provided by default.

از آنجایی که بوت استرپ اعمال می شودdisplay: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

با خیال راحت فرم های خود را هر طور که دوست دارید بسازید<fieldset>s, <div>s, or nearly any other element.

با اضافه کردن عبارت، فرم های افقی را با شبکه ایجاد کنید.row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.

گاهی اوقات، ممکن است لازم باشد از ابزارهای حاشیه یا padding استفاده کنید تا تراز کامل مورد نیاز خود را ایجاد کنید. padding-top on our stacked radio inputs label to better align the text baseline.

حتما استفاده کنید.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.

فرم های پیچیده تری را می توان با استفاده از کلاس های گرید ما ساخت.

همانطور که در مثال های قبلی نشان داده شد، سیستم شبکه ما به شما امکان می دهد هر تعداد را قرار دهید.cols 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 .cols equally split the rest, with specific column classes like .col-sm-7.

مثال زیر از یک ابزار flexbox برای مرکز عمودی محتویات و تغییرات استفاده می کند.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.

استفاده کنید.row-cols-* classes to create responsive horizontal layouts. By adding gutter modifier classes, we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the .col-12 helps stack the form controls and more. The .align-items-center aligns the form elements to the middle, making the .form-checkbox align properly.