If you want to make your message outstanding on the web page, Jumbotron can be a good style choice. Jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. (From Bootstrap Components-Jumbotron)
I would like to try this component on my page, so I create the HTML page and apply the Jumbotron code in the body part. I change the text “Hello, World!” to “This is Jumbotron” and also put its definition in the <p> element.
If we want the whole part to be center of the page, the instructor told us a quick way to do that is adding a “container” outside the jumbotron code.
The instructor also recommended some common forms on Bootstrap. I prefer the inline form because it is very short and simple. I apply the inline form code under the Jumbotron code. The class value “form-group” will group that input, so it can leave some space between each input.
As a result, we can see all the input are in one line. There are some spaces between “Name” and “Email” and “Send invitation”.
The final page looks like:
