This is an example of a one-page navigation menu template. This can be used for floating style website as it reserves a particular space on the left sidebar. The design is such that it does not contain boundary on the homepage but for the subpages, you would see the boundaries. The menu options are just a blend to the rest of the web page as this design is possible due to the icons used for the website. The visual effects are purely due to CSS styling. These menu options can be used for creating web pages or personal blogs as the menu items are less in number. Check out the colors set for each paragraph, which gives a look of a new page. You can use this snippet for your one-page design layouts.
This is the best example of Off Canvas Menu. This can be used in any devices. A user would click on the icon or touch an icon to make an action that would result in the vertical navigation of menu sliding into the screen from the off canvas. This is one of the best examples of a multi-device layout pattern where web pages are designed to arrange and rearrange the page layout according to the devices used. The icon called as “Hamburg menu icon” as it resembles Hamburg. Instead of an icon, we can also use a button called “Menu”. To achieve this, we use wrapper where we are placing the off-canvas and menu to display the vertical navigation bar. To demo the action the toggle button is displayed at the center. You can place it to the sides of the screen. CSS and Javascript are used along with this pattern. Ref: "https://codepen.io/ncerminara/pen/quJpi"
This is an example of “Form Wizard with multiple steps”, It contains 3 steps, First for the user name, the second step contains the company name and address and 3rd step is finished. This login form uses the stepWizard class to create the steps in a container. The class stepwizardRow is used to define a single row in this stepWizard and each step is defined using stepWizardStep. Each stepWizardStep contains a link to form using id. The steps are defined as types of buttons, whereas there is 3 form defined using stepupContent class. Each step has a button once click using jquery it moves on to next step. CSS defines the styles for StepWizard classes. Each step is shown as a circle using btn-circle class. Check out the styling properties used to represent these steps.JS is used to navigate through the steps and during navigation it also validates the text.
This is a simple contact form, which is using class Jumbotron for the header. This class is a lightweight, flexible component that can optionally extend the entire viewport to showcase the header part of the snippet. In the second part, the form is placed in the container. The container helps to deal with responsive behavior of the form. FormGroup is used along with the FormContainers, to display the labels and types. An addon is used to display the email icon for email FormControl. This is all placed in the class InputGroup. The snippet used column setting for medium devices for each formGroup. The style is limited to jumbotron class and header.