Now that we have covered the basics of the bootstrap GRID we can continue building our login screen. Put an additional edit component on the second row/col and a submit button on the third. The design now looks like this:


Click the green double arrow button to generate and run the application:



The form does not look good. Initially we have added a row, col and field but did not do anything on padding/margin, the second two rows were generated that has a default setting for padding and margin. So now what?

There is a quick way of making settings uniform. Go back to the design screen, use the right mouse button and open the responsive layout function



This will open the bulk layout editor. Click on the ComponentID header to sort the rows so that the components gets aligned. 



Select all columns with the mouse and use the group button to group the columns. The properties that are not valid for the columns are now removed:



Every change you apply in the blue area will be applied to all other element in that area. So if you set the margin and padding, the will be set for all elements.


Repeat this action for each inconsistency. (In above samples we made a lot of those on purpose, just to show you the way to fix it).





The button in the above screen has  no color (depending on the theme), there is no header, logo, anything. So it is time to spice things up. First lets modify the labels and the content of the fields. You do so by changing the value and label properties of the field. 

Next put a panel header on the panel and select it. First, to set the header on top of of the panel, select it with the mouse and while keeping the left mouse button pressed, drag the element to the top of the form and release. Set the title to ‘login’ or whatever you like.

There are two color properties that are interesting here: textcolor and backgroundcolor. The values however are a bit different then expected. In some cases you can apply a valid html coloring but as this is a bootstrap element, the coloring needs to apply to the selected theme. The prefix might change but the suffix is always consistent where bootstrap colors are required. 



If you need to find out what the colors are then in the right bottom corner there is a color scheme that displays the colors. The colors are used in all kind of different context, and are parsed directly from the themes files. It is possible to create your own theme, but as there are numerous websites that offer this functionality we have not integrated a separate tool for that. One of the examples that you can use is bootstrap.build:






Some visual components have 4 configurable colors, for the text/value and for the label. Now you should be able to define some coloring and achieve the next form (change buttonclass):



This form takes the full screen which is too much for a regular desktop. If you make the display area smaller then it looks like this (you can make the display area smaller by the divider on the right side .



(If you have ‘played’ with the several sizes you can quickly go back to the original by the menu Window->restore window)

To fix, set the device class to 12 for xl. That means that the input fields always will be maximized. If you resize the browser then the inputfields will automatically adjust:



But on a desktop, you might want to make the form smaller. But on mobile you want a full screen. This can be done by setting a device class on the panel and set the centered property to ‘yes’.



The result is now:



And if you make the form smaller: