Bootstrap - Form

   
   
 bootstrap  
 frontend  
Article Series

Bootstrap5 article series.

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Step Nine: Preparing Bootstrap’s form for dynamic data handling.

After years with static blog, I continue my journey to dynamic web, with data reading and writing. So I prepare.

Using form in bootstrap required more exposure.

1: Chapter Overview

This chapter is short. Because I do not have enough experience yet.

This time, I make a mediocre article.

Source Code: Step-09

To obtain the source code for this chapter, please follow the link provided below:

Icons Sets

Instead of my usual FontAwesome, I start to use Bootstrap Icons instead.

Stylesheet Assets

For simplicity reason, I shamefully copy and paste stylesheet, from official bootstrap example,

❯ tree -C css
css
├── bootstrap.css
├── bootstrap.css.map
├── form-common.css
├── helper.css
├── helper.css.map
├── main.css
├── main.css.map
└── signin.css

1 directory, 8 files

Bootstrap5: Stylesheet Assets

We can see two new files:

  • form-common.css
  • signin.css

Nunjucks Directory Structure

The code structure is very common with previous article. No need further explanation.

❯ tree -C views
views
├── 091-login-page.njk
├── 092-forms.njk
├── contents
│   ├── 091-login-form.njk
│   ├── 091-main.njk
│   ├── 092-main.njk
│   └── 092-user-form.njk
├── heads
│   ├── links-blog.njk
│   ├── meta.njk
│   └── style-icons.njk
├── layouts
│   └── base.njk
└── shared
    ├── footer.njk
    ├── navbar-button.njk
    ├── navbar-collapse.njk
    ├── navbar-dropdown.njk
    ├── navbar.njk
    └── symbols.njk

5 directories, 16 files

Bootstrap5: Nunjucks NERDTree

Block: Common HTML Head

The blocks for HTML Head is similar with:

{% block htmlhead %}
  {% include './heads/meta.njk' %}
  {% include './heads/links-blog.njk' %}
  {% include './heads/style-icons.njk' %}

  ...
{% endblock %}

Bootstrap5: Nunjucks NERDTree: HTML Head

2: Login Page

I grab this form boostrap example, with very few modification, then put signin form inside my own theme.

Block: HTML Head

The blocks for HTML Head have this additional assets:

{% block htmlhead %}
  {% include './heads/meta.njk' %}
  {% include './heads/links-blog.njk' %}
  {% include './heads/style-icons.njk' %}

  <link rel="stylesheet" type="text/css"
    href="assets/css/signin.css">
{% endblock %}

Stylesheet

The responsible stylesheet for signin form is:

.form-signin {
  max-width: 330px;
  padding: 15px;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

I do not create this stylesheet, so I won’t make a screenshot.

Block: Content

The blocks for Content is:

{% block content %}
  <!-- responsive colored main layout -->
  <div class="row layout-base maxwidth">
    {% include './contents/091-main.njk' %}
  </div>
{% endblock %}

Nunjucks: Main

While the main itself contain an inner template:

<main class="col px-0">
  ...
    {% include './091-login-form.njk' %}
  ...
</main>

We need to go deeper then.

Nunjucks: Login Form

I think it is easier to read in modular template this way.

<div class="form-signin w-100 m-auto">
  <form>
    ...

    <div class="form-floating hoverable">
      <input type="email" 
        class="form-control"
        id="floatingInput"
        placeholder="name@example.com">
      <label for="floatingInput"
        >Email address</label>
    </div>
    <div class="form-floating hoverable">
      ...
    </div>

    ...
  </form>
</div>

Bootstrap5: Nunjucks: Contents: Login Form

Preview on Browser

Let’s see the result!

Bootstrap5: Form: Login: xs

Just a copy from official example. I won’t be so excited.

3: User Form

I also grab this form boostrap example, with very few modification, then also put the form inside my own theme.

Block: HTML Head

The blocks for HTML Head have this additional assets:

{% block htmlhead %}
  {% include './heads/meta.njk' %}
  {% include './heads/links-blog.njk' %}
  {% include './heads/style-icons.njk' %}

  <link rel="stylesheet" type="text/css"
    href="assets/css/form-common.css">
{% endblock %}

Stylesheet

The responsible stylesheet common form is:

.form-common {
  max-width: 500px;
  padding: 15px;
}

I forget who created this stylesheet, so I won’t make a screenshot, either. I guess I copied from the signin form.

Block: Content

The blocks for Content is:

  • [gitlab.com/…/views/092-forms.njk][njk-v-092-forms]
{% block content %}
  <!-- responsive colored main layout -->
  <div class="row layout-base maxwidth">
    {% include './contents/092-main.njk' %}
  </div>
{% endblock %}

Nunjucks: Main

While the main itself contain an inner template:

<main class="col px-0">
  ...
    {% include './092-user-form.njk' %}
  ...
</main>

Again, we need to go deeper.

Nunjucks: User Form

I think it is easier to read in modular template this way.

  <div class="form-common w-100 m-auto">
  <h4 class="mb-3">Players and Staffs</h4>
  <form class="needs-validation" novalidate>
    <div class="row g-3">
      <div class="col-12">
        <label for="name" class="form-label"
          >Name</label>
        <input type="text" class="form-control"
          id="name" placeholder=""
          value="" required>
        <div class="invalid-feedback">
          Valid name is required.
        </div>
      </div>

      ...
    </div>

    <hr class="my-4">

    <button
      class="w-100 btn btn-primary btn-lg"
      type="submit">Continue to register</button>
    <br/>
  </form>
</div>

Bootstrap5: Nunjucks: Contents: user Form

Preview on Browser

Let’s see the result!

Bootstrap5: Form: User: xs

Just a copy from official example. I won’t be so excited.

What is Next 🤔?

We need to learn parts of dashboard content, before gathering up all together into one dashboard page.

Consider continue reading [ Bootstrap 5 - Tables and Chart ].