Cards

Содержание:

Community
Bootstrap Checkboxes
- Example
- Example explained
Static Controls
Alignment
- Vertical alignment
- Horizontal alignment
- Column wrapping
- Column breaks
Accessibility
Bootstrap Form Control States
- Example
- Example
Forms
Горизонтальная форма
- - Bootstrap 4 против Bootstrap 3
Доступность
Form Helper Options
- Labels
- Input Elements / Controls
- Help Text
- Prepending and Appending Inputs
- Additional Form Group Attributes
- Suppressing the Form Group Altogether
Form Layout
- Vertical or Basic Form
- Inline Form
- Horizontal Form
Toggle buttons
- Checkbox toggle buttons
- Outlined styles
Community
Direction
Form Styles
- Inline Forms
- Horizontal Forms
- Custom Field Layout
- Custom Form Element Styles
Important globals
- HTML5 doctype
- Responsive meta tag
- Box-sizing
- Reboot
Important globals
- HTML5 doctype
- Responsive meta tag
- Box-sizing
- Reboot
Z-index
Customizing the grid
- Columns and gutters
- Grid tiers
Best Bootstrap Registration/Signup Form Templates [Free download]
- 7. Sign Up Forms — Bootstrap 3 Registration Form with Validation
- 8. Login & Signup Forms in Panel
- 10. Bootstrap Dual Design Registration Form
- 12. Material Login Form

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

Read and subscribe to The Official Bootstrap Blog.
Join the official Slack room.
Chat with fellow Bootstrappers in IRC. On the server, in the channel.
Implementation help may be found at Stack Overflow (tagged ).
Developers should use the keyword on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

Bootstrap Checkboxes

Атрибуты полей форм

Checkboxes are used if you want the user to select any number of options from
a list of preset options.

The following example contains three checkboxes. The last option is disabled:

Example

<div class=»form-check»> <label class=»form-check-label»>
<input type=»checkbox» class=»form-check-input» value=»»>Option 1
</label></div><div class=»form-check»> <label
class=»form-check-label»>    <input type=»checkbox»
class=»form-check-input» value=»»>Option 2 </label></div>
<div class=»form-check»> <label class=»form-check-label»>
<input type=»checkbox» class=»form-check-input» value=»» disabled>Option 3
</label></div>

Example explained

Use a wrapper element with to ensure proper margins for labels and checkboxes.

Add the class to label elements, and to style checkboxes properly inside the container.

Static Controls

Как сделать кнопку

You can create a static control like this:

<%= f.static_control :email %>

Here’s the output for a horizontal layout:

<div class="form-group">
  <label class="col-sm-2 form-control-label" for="user_email">Email</label>
  <div class="col-sm-10">
    <input class="form-control-plaintext" id="user_email" name="user" readonly="readonly" type="text" value="test@email.com"/>
  </div>
</div>

You can also create a static control that isn’t based on a model attribute:

<%= f.static_control :field_name, label: "Custom Static Control", value: "Content Here" %>

may be any name that isn’t already used in the form. Note that you may get «unpermitted parameter» messages in your log file with this approach.

You can also create the static control the following way, if you don’t need to get the value of the static control as a parameter when the form is submitted:

<%= f.static_control label: "Custom Static Control", value: "Content Here", name: nil %>

(If you neither provide a field name nor , the Rails code that submits the form will give a JavaScript error.)

Prior to version 4 of , you could pass a block to the method.
The value of the block would be used for the content of the static «control».
Bootstrap 4 actually creates and styles a disabled input field for static controls, so the value of the control has to be specified by the option.
Passing a block to no longer has any effect.

Alignment

Html-теги и атрибуты, о которых вы, возможно, не знали

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

One of three columns

Horizontal alignment

One of two columns

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-9
.col-4Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6Subsequent columns continue along the new line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple s, but not every implementation method can account for this.

.col-6 .col-sm-3
.col-6 .col-sm-3

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4
.col-6 .col-sm-4

Accessibility

Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a element, or—in the case of buttons—to include sufficiently descriptive text as part of the content.

For situations where it’s not possible to include a visible or appropriate text content, there are alternative ways of still providing an accessible name, such as:

elements hidden using the class
Pointing to an existing element that can act as a label using
Providing a attribute
Explicitly setting the accessible name on an element using

If none of these are present, assistive technologies may resort to using the attribute as a fallback for the accessible name on and elements. The examples in this section provide a few suggested, case-specific approaches.

While using visually hidden content (, , and even content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

Bootstrap Form Control States

INPUT FOCUS — The outline of the input is removed and a box-shadow is applied on focus
DISABLED INPUTS — Add a attribute to disable an input field
DISABLED FIELDSETS — Add a attribute to a fieldset to disable all controls within
READONLY INPUTS — Add a attribute to an input to prevent user input
VALIDATION STATES — Bootstrap includes validation styles for error, warning, and
success messages. To use, add , , or to the parent element
ICONS — You can add feedback icons with the class and an icon
HIDDEN LABELS — Add a class on non-visible labels

The following example demonstrates some of the form control states above in a Horizontal form:

Example

<form class=»form-horizontal»> <div class=»form-group»> <label class=»col-sm-2 control-label»>Focused</label> <div class=»col-sm-10″> <input class=»form-control» id=»focusedInput» type=»text» value=»Click to focus»> </div> </div> <div class=»form-group»> <label for=»disabledInput» class=»col-sm-2 control-label»>Disabled</label> <div class=»col-sm-10″> <input class=»form-control» id=»disabledInput» type=»text» disabled> </div> </div> <fieldset disabled> <div class=»form-group»> <label for=»disabledTextInput» class=»col-sm-2 control-label»>Fieldset disabled</label> <div class=»col-sm-10″> <input type=»text» id=»disabledTextInput» class=»form-control»> </div> </div> <div class=»form-group»> <label for=»disabledSelect» class=»col-sm-2 control-label»></label> <div class=»col-sm-10″> <select id=»disabledSelect» class=»form-control»> <option>Disabled select</option> </select> </div> </div> </fieldset> <div class=»form-group has-success has-feedback»> <label class=»col-sm-2 control-label» for=»inputSuccess»> Input with success and icon</label> <div class=»col-sm-10″> <input type=»text» class=»form-control» id=»inputSuccess»> <span class=»glyphicon glyphicon-ok form-control-feedback»></span> </div> </div> <div class=»form-group has-warning has-feedback»> <label class=»col-sm-2 control-label» for=»inputWarning»> Input with warning and icon</label> <div class=»col-sm-10″> <input type=»text» class=»form-control» id=»inputWarning»> <span class=»glyphicon glyphicon-warning-sign form-control-feedback»></span> </div> </div> <div class=»form-group has-error has-feedback»> <label class=»col-sm-2 control-label» for=»inputError»> Input with error and icon</label> <div class=»col-sm-10″> <input type=»text» class=»form-control» id=»inputError»> <span class=»glyphicon glyphicon-remove form-control-feedback»></span> </div> </div></form>

And here is an example of some of the form control states in an Inline form:

Example

<form class=»form-inline»> <div class=»form-group»> <label for=»focusedInput»>Focused</label> <input class=»form-control» id=»focusedInput» type=»text»> </div> <div class=»form-group»> <label for=»inputPassword»>Disabled</label> <input class=»form-control» id=»disabledInput» type=»text» disabled> </div> <div class=»form-group has-success has-feedback»> <label for=»inputSuccess2″>Input with success</label> <input type=»text» class=»form-control» id=»inputSuccess2″> <span class=»glyphicon glyphicon-ok form-control-feedback»></span> </div> <div class=»form-group has-warning has-feedback»> <label for=»inputWarning2″>Input with warning</label> <input type=»text» class=»form-control» id=»inputWarning2″> <span class=»glyphicon glyphicon-warning-sign form-control-feedback»></span> </div> <div class=»form-group has-error has-feedback»> <label for=»inputError2″>Input with error</label> <input type=»text» class=»form-control» id=»inputError2″> <span class=»glyphicon glyphicon-remove form-control-feedback»></span> </div></form>

❮ Previous
Next ❯

Forms

Every group of form fields should reside in a element. Bootstrap provides no default styling for the element, but there are some powerful browser features that are provided by default.

New to browser forms? Consider reviewing the MDN form docs for an overview and complete list of available attributes.
s within a default to , so strive to be specific and always include a .
You can disable every form element within a form with the attribute on the .

Since Bootstrap applies and 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.

Горизонтальная форма

Вы можете использовать классы сетки Bootstrap для создания горизонтальных форм. Просто укажите, сколько колонок должен занимать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждой колонки.

Вы также должны добавить класс .col-form-label к элементу <label>, чтобы метка относительно текстовых полей расположилась по центру вертикали.

Bootstrap 4 против Bootstrap 3

Когда речь идёт о горизонтальных формах, имеются некоторые незначительные различия между Bootstrap 4 и Bootstrap 3.

Сетки
При использовании сеток для макета формы, Bootstrap 4 требует класс .row. Этот класс не является обязательным для форм Bootstrap 3 (хотя по прежнему обязателен для сеток Bootstrap 3).
Метки
Bootstrap 4 использует .col-form-label в сетке макета формы, тогда как Bootstrap 3 использует .control-label

Обратите внимание, что Bootstrap 4 изначально использовал .form-control-label, но впоследствии заменил его на .col-form-label.
Класс .form-horizontal
Bootstrap 3 требует класс .form-horizontal, тогда как Bootstrap 4 нет.

Доступность

Убедитесь, что у всех элементов управления формы есть подходящие доступные имена, чтобы их назначение можно было донести до пользователей вспомогательных технологий. Самый простой способ добиться этого — использовать элемент или в случае кнопок — включить достаточно описательный текст как часть содержимого .

В ситуациях, когда невозможно включить видимую метку или соответствующее текстовое содержимое, есть альтернативные способы предоставления доступного имени, например:

Элементы скрыты с помощью класса
Указание на существующий элемент, который может действовать как метка, используя
Предоставление атрибута
Явная установка доступного имени для элемента с помощью

Если ни один из них не присутствует, вспомогательные технологии могут прибегнуть к использованию атрибута в качестве запасного варианта для доступного имени в элементах и . Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев.

Несмотря на то, что использование визуально скрытого содержимого (содержимое , и даже , которое исчезает после того, как в поле формы появляется содержимое) принесет пользу пользователям вспомогательных технологий, отсутствие видимого текста метки все же может быть проблематично для некоторых пользователей. Как правило, лучше всего подходят видимые метки в той или иной форме как с точки зрения доступности, так и удобства использования.

Form Helper Options

Many of the helpers accept the same options. The exceptions are:

,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

The options for the form helpers that aren’t in the exceptions list are described in the following sub-sections:

Labels

Use the option if you want to specify the field’s label text:

<%= f.password_field :password_confirmation, label: "Confirm Password" %>

To hide a label, use the option. This adds the
class, which keeps your labels accessible to those using screen readers.

<%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %>

To add custom classes to the field’s label:

<%= f.text_field :email, label_class: "custom-class" %>

Or you can add the label as input placeholder instead (this automatically hides the label):

<%= f.text_field :email, label_as_placeholder: true %>

Input Elements / Controls

To specify the class of the generated input tag, use the option:

<%= f.text_field :email, control_class: "custom-class" %>

Help Text

To add help text, use the option:

<%= f.password_field :password, help: "Must be at least 6 characters long" %>

This generates:

<small class="form-text text-muted">Must be at least 6 characters long</small>

This gem is also aware of help messages in locale translation files (i18n):

en:
  activerecord:
    help:
      user:
        password: "A good password should be at least six characters long"

Help translations containing HTML should follow the convention of appending to the name:

en:
  activerecord:
    help:
      user:
        password_html: "A <strong>good</strong> password should be at least six characters long"

If your model name has multiple words (like ), the key on the
translation file should be underscored ().

You can override help translations for a particular field by passing the
option or turn them off completely by passing .

Prepending and Appending Inputs

You can pass and/or options to input fields:

<%= f.text_field :price, prepend: "$", append: ".00" %>

If you want to attach multiple items to the input, pass them as an array:

<%= f.text_field :price, prepend: , append:  %>

You can also prepend and append buttons. Note: The buttons must contain the
class to generate the correct markup.

<%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-secondary") %>

To add a class to the input group wrapper, use the option.

<%= f.email_field :email, append: f.primary('Subscribe'), input_group_class: 'input-group-lg' %>

Additional Form Group Attributes

Bootstrap mark-up dictates that most input field types have the label and input wrapped in a .

If you want to add an additional CSS class or any other attribute to the form group div, you can use the option.

<%= f.text_field :name, wrapper: { class: 'has-warning', data: { foo: 'bar' } } %>

Which produces the following output:

<div class="form-group has-warning" data-foo="bar">
  <label class="form-control-label" for="user_name">Id</label>
  <input class="form-control" id="user_name" name="user" type="text">
</div>

If you only want to set the class on the form group div, you can use the option. It’s just a short form of .

Suppressing the Form Group Altogether

You may want to define your own form group div around a field. To do so, add the option to the input field. For example:

f.form_group :user do
  f.email_field :email, wrapper: false
end

Note that Bootstrap relies on the form group div to correctly format most fields, so if you use the option, you should provide your own form group div around the input field. You can write your own HTML, or use the helper.

Form Layout

Bootstrap provides you with following types of form layouts −

Vertical (default) form
In-line form
Horizontal form

Vertical or Basic Form

The basic form structure comes with Bootstrap; individual form controls automatically receive some global styling. To create a basic form do the following −

Add a role form to the parent <form> element.
Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing.
Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Inline Form

To create a form where all of the elements are inline, left aligned and labels are alongside, add the class .form-inline to the <form> tag.

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

By default inputs, selects, and textareas have 100% width in Bootstrap. You need to set a width on the form controls when using inline form.
Using the class .sr-only you can hide the labels of the inline forms.

Horizontal Form

Horizontal forms stands apart from the others not only in the amount of markup, but also in the presentation of the form. To create a form that uses the horizontal layout, do the following −

Add a class of .form-horizontal to the parent <form> element.
Wrap labels and controls in a <div> with class .form-group.
Add a class of .control-label to the labels.

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>
	
</form>

Toggle buttons

Create button-like checkboxes and radio buttons by using styles rather than on the elements. These toggle buttons can further be grouped in a button group if needed.

Checkbox toggle buttons

Single toggle

Checked

Disabled

Visually, these checkbox toggle buttons are identical to the . However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.

Checked

Radio

Disabled

Radio

Outlined styles

Different variants of , such at the various outlined styles, are supported.

Single toggleCheckedChecked success radio

Danger radio

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

Read and subscribe to The Official Bootstrap Blog.
Join the official Slack room.
Chat with fellow Bootstrappers in IRC. On the server, in the channel.
Implementation help may be found at Stack Overflow (tagged ).
Developers should use the keyword on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

Direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is . However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

Use to set a horizontal direction (the browser default), or to start the horizontal direction from the opposite side.

Flex item 1
Flex item 2
Flex item 3

Use to set a vertical direction, or to start the vertical direction from the opposite side.

Flex item 1
Flex item 2
Flex item 3

Responsive variations also exist for .

Form Styles

By default, your forms will stack labels on top of controls and your controls
will grow to 100 percent of the available width. This is consistent with Bootstrap’s «mobile first» approach.

Inline Forms

To use an inline-layout form, use the option. To hide labels,
use the option, which keeps your labels accessible to those
using screen readers.

<%= bootstrap_form_for(@user, layout: :inline) do |f| %>
  <%= f.email_field :email, hide_label: true %>
  <%= f.password_field :password, hide_label: true %>
  <%= f.check_box :remember_me %>
  <%= f.submit %>
<% end %>

To skip label rendering at all, use option.

<%= f.password_field :password, skip_label: true %>

Horizontal Forms

To use a horizontal-layout form with labels to the left of the control, use the
option. You should specify both and
css classes as well (they default to and ).

In the example below, the checkbox and submit button have been wrapped in a
to keep them properly aligned.

<%= bootstrap_form_for(@user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.form_group do %>
    <%= f.check_box :remember_me %>
  <% end %>
  <%= f.form_group do %>
    <%= f.submit %>
  <% end %>
<% end %>

The and css classes can also be changed per control:

<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
  <%= f.email_field :email %>
  <%= f.text_field :age, control_col: "col-sm-3" %>
  <%= f.form_group do %>
    <%= f.submit %>
  <% end %>
<% end %>

or default value can be changed in initializer:

# config/initializers/bootstrap_form.rb
module BootstrapForm
  class FormBuilder
    def default_label_col
      'col-sm-4'
    end
    def default_control_col
      'col-sm-8'
    end
    def default_layout
      # :default, :horizontal or :inline
      :horizontal
    end
  end
end

Control col wrapper class can be modified with . This option will preserve column definition:

<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
  <%= f.email_field :email %>
  <%= f.text_field :age, add_control_col_class: "additional-control-col-class" %>
  <%= f.form_group do %>
    <%= f.submit %>
  <% end %>
<% end %>

Custom Field Layout

The form-level can be overridden per field, unless the form-level layout was :

<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
  <%= f.email_field :email %>
  <%= f.text_field :feet, layout: :default %>
  <%= f.text_field :inches, layout: :default %>
  <%= f.form_group do %>
    <%= f.submit %>
  <% end %>
<% end %>

A form-level can’t be overridden because of the way Bootstrap 4 implements in-line layouts. One possible work-around is to leave the form-level layout as default, and specify the individual fields as , except for the fields(s) that should be other than in-line.

Custom Form Element Styles

The option can be used to replace the browser default styles for check boxes and radio buttons with dedicated Bootstrap styled form elements. Here’s an example:

<%= bootstrap_form_for(@user) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me, custom: true %>
  <%= f.submit "Log In" %>
<% end %>

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Important globals

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Z-index

Several Bootstrap components utilize , the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used + or +.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit values of , , and for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher value to show their border over the sibling elements.

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. is used to generate the widths (in percent) of each individual column while sets the width for the column gutters.

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the and to something like this:

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in (not , , or ).

Best Bootstrap Registration/Signup Form Templates [Free download]

7. Sign Up Forms — Bootstrap 3 Registration Form with Validation

Designer: Juffrey Rodriguez

This is a long horizontal registration form with several input fields. There is a drop-down menu on the third line «Department/Office». In addition, the designer has added a small icon on each line to clarify the required input.

8. Login & Signup Forms in Panel

Designer: Calvinko

This form contains 2 input fields, a checkbox, two login buttons, a password refound CTA on the right top corner and a signup CTA on the bottom. All these make it a functional sign in form.

Designer: Dipendra

This form is Google-friendly. You can sign up quickly with your Google account.

10. Bootstrap Dual Design Registration Form

Designer: Kshiti06

Select Employee or Hirer to reach different forms. The signup form and the login form are displayed on the same screen. The asymmetrical layout design creates a balance between the two forms. This form is also a great website layout design example.

Designer: Nikolay Talanov

Highlight to emphasize

Nice picture

12. Material Login Form

Designer: Andy Tran

Material design has been a widely-adopted principle in web design. Andy used it here in this form and, as you see, it is really great with lovely interactive features. Hover your mouse on the input field or submit button and they will turn the red. The red icon with a pen is actually a switch button to change to the registration form.