hub.eb?material_id=641&track_id=632

My First App - Part 4


In the final part we will improve the appearance of both the details and the success Pages using some simple Bootstrap classes and Controls.

The details page will look like this:

The success page will look like this:

Steps


1

Improve the appearance of the details Page's header by adding some padding to the top and bottom:

  1. Select the  Header Panel in the Outline view.
  2. Set its Class property to py-3 in the Properties view.

2

Layout the email_from and email_to Field Controls side by side:

  1. Add a  Bootstrap Row as the first child of the  Main  Bootstrap Container in the Outline view.
  2. Add a  Bootstrap Column to the   Bootstrap Row.
  3. Drag the email_from Field Control into the  Bootstrap Column.
  4. Add another  Bootstrap Column to the   Bootstrap Row after the first.
  5. Drag the email_to Field Control into this  Bootstrap Column.

At this point, your Outline view should look like this:

3

Align the Send button to the right:

  1. Add a  Panel before the Send  Button in the Outline view.
  2. Drag the Send  Button into this  Panel.
  3. Select the Panel and set its Class property to text-end in the Properties view.

At this point, your Outline view should look like this:

4

Improve the appearance of the success Page by adding some padding and aligning the text:

  1. Select the success page from the Pages view.
  2. Select Main in the Outline view and set its Class property to p-5 text-center in the Properties view.

5

Test the Form in your browser:

  1. Click the Test  button in the main toolbar and press Submit in the resulting dialog.
  2. Fill in the fields, providing your own email address in the toEmail input.
  3. Press Send.

See the cosmetic changes to the details and success pages.

Current Tutorial

Related