Angular forms with GitHub example — tutorial 2: form styling

Angular form tutorials presented by Ramin ahmadi or
Angular form tutorials presented by Ramin ahmadi or

Having a simple form might be handy but it should be coherent with the rest of the website and look consistent in all browsers and devices. I have already covered Angular material in my previous tutorial and here I’d like to introduce another popular CSS framework called Bootstrap. I assume that you are familiar with the framework already, otherwise head their website first and learn how it works first. We are going to install Bootstrap together, look into creating basic variables and how to frame our form. it is very important, even for demonstration purposes, to be able to prototype a form and make it look reasonably good before attempting to develop the form completely so this tutorial helps you to create a good looking form from scratch.

Best way to install Bootstrap is to use NPM. Open the terminal window on your VsCode and type below command command.

GitHub code commit

Now we need to include style reference in our Angular application. If you don’t have the project from previous tutorial, go to my Github page and download/fork Angular-forms project. Go to Angular.json file and add bootstrap css reference under styles property. Adding it here will load application level styles faster. You might need to stop the server (press Ctrl + c) and start again with ng serve to make sure Bootstrap reference is added.

GitHub code commit

In order to make your app visually appealing and consistent, you need to pick one of the frameworks. In this tutorials, Ill be using bootstrap’s grid system and Material components which means putting Angular material components such as textboxes, buttons, etc placed inside bootstrap containers.

Okay, so lets go back to our details-form component and create a nice container for it. We need a container and a row wrapper and a slight change of style to make the form appear in the center of the page.

GitHub code commit

Now if you notice we have some font-sizes and background colour that are introduced for this component only. To make sure things are consistent, we need to create variables and add refer to them in styles so all components would use the same reference, making sure style properties are consistent.

Lets head to our style file and add below code to load material theme variables in our main style file (style.scss)

Then lets go to assets folder, create a new folder and name it scss and then add a new file as variables.scss inside it. This is where we are going to keep our variables so we can reach them easily inside components.

I’ve used a material color palette maker to generate necessary variations for below set of colors.

After exporting above color pallets, I add them to variables.scss file

Then I’m gonna add main variables to be accessed by components. so that in any components we need to first, include variables.scss file to have access to variables and then use them appropriately.

so lets head back to our details-form component and use our color variables.
GitHub code commit

Hope you enjoyed this tutorial and again you can find the source code on my GitHub page and you can see the app on stackblitz

Feel free to reach out to me if you have any questions.

Full stack front-end developer. I make it a goal to automate myself out of routine tasks. My motto is, 'write human readable code, lean and clean'.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store