Bootstrap container: user manual

Using Container Bootstrap will give the user a powerful base site. And what really makes it impressive is the wide range of components that can be added to the site. Since Bootstrap already has built-in CSS and Javascript, components and functionality are designed. Of course, the user can further edit them to customize the site to his liking.

Grid principle

This set of tools for creating sites and web applications is based on the principle of the grid to properly scale components for viewing on different screens. The Container Bootstrap grid system consists of containers, rows, and columns that are used for a specific site layout.

Bootstrap containers are used to determine the width of the layout. Elements are added to containers and affect its width. It is a <div> element with class = "container" and affects all elements in it.

The default containers are 15 pixels each, which softens the view from the bottom of the page. Rows and columns are added inside containers with fixed Bootstrap Container width by default, which vary depending on the size of the viewer. The width of the device being viewed and the corresponding container is indicated in the table below:

Grid Rules:

1. Columns must be the immediate children of the row.
2. Rows are used only for storing columns and nothing else.
3. Lines should be placed inside the container.

These rules are very important. Rows and columns always work together, and the user should not use one without the other.

It may seem complicated at first, but it is really easy, you just need to understand how the Grid works.

If users don’t want the containers to change at a fixed width, you can use class = "container-fluid" instead of class = "container". This will cause the containers to always fit the Bootstrap container to the full width of the screen and not resize to a fixed width.

The grid system allows you to have up to 12 columns per page. They can be used separately or be grouped together. To group columns together, you need to create rows by adding a div with class = "row", which encloses the column code.

Interval Setting

To be neat, you first need to understand how Bootstrap sets the spacing. For all forms, you must enclose the label and control in a <div> with class = "form-group". The controls and labels in the <div> have an interval style. They must be in their own class.

The form-control class sets the width of the Bootstrap container to 100%, forcing it to cover the width of the form and resize it using the window. This property is used to enter and select controls. Thus, the selected control will be formatted with form control enabled and will look like a choice with or without form control class, and input control will be formatted with the addition of a control form.

Controls

Controls, such as text boxes and check boxes, are parts that you can easily add to your form. Inputs are fields in which the user can enter text.

This is the basic input principle for Container Bootstrap using the HTML5 text attribute. Type declares the type of input. Placeholder defines the text displayed in the input field. These types can be declared by adding to the input. If you need to add email input, change it to type = "email".

It should be borne in mind that you will need to enable the input type so that the control is properly designed. A text area control is an area that allows you to use a large amount of text, for example, for a comment section.

When adding a text area, you can adjust the size by declaring how many lines you want to cover. Because Container Bootstrap is built on rows and columns, you can make the text area smaller or larger by increasing or decreasing the number of rows.

Flags allow users to select multiple options. By default, checkboxes are displayed vertically. However, you can change the flags to display horizontally by changing the type to type = "checkbox-inline".

The inline checkboxes are configured differently than the basic ones. The built-in <label> flag element is assigned the class = "checkbox-inline". However, if you look at the base flag code, you can see that class = "checkbox" is declared in the <div> element, and not in the <label> element.

The switch is like a check box. Only one radio button can be selected at a time, while the flags themselves can have several selected. As with flags, vertical switches are displayed by default, although you can also change the code to display horizontally.

Types of Boot Forms

There are several types of shapes: basic, embedded, and horizontal. Each of them is different in its own way. The built-in ones have components called “controls” that are vertically aligned. For horizontal forms, the controls are adjusted horizontally. The main form comes from the global layout style.

To create a basic form, you just need to create the form in HTML using the <form> element, and then add the Bootstrap controls to the <form> tags. The other two types of forms use classes to differentiate them. If the class is not specified, the default form corresponds to the base.

To make an inline form, add class = "form-inline" to the <form> element. This will automatically adjust the controls in the form vertically.

As in the inline form, the horizontal form is obtained by adding the class = "form-horizontal" to the <forms> element. This will automatically adjust the controls horizontally.

Row and Column Settings

Lines span the width of the Container Bootstrap. They have a negative 15-pixel margin at the end set by its container. This is because each of the columns has its own 15-pixel margin, which replaces the container marker. Columns aligned next to each other will have a 15x edge, which will result in a 30-pixel edge between the two columns.

Lines have a -15 px registration, which cancels the addition of a 15 px container. The content in the column will depend on the 15 pixel field of the column. Columns have a registration of 15 pixels. Columns adjacent to each other will be indented with a width of 15 px, resulting in a buffer of 30 px.

Replace the prefix and Column Number with the preferred size and number of columns. Prefixes determine which device the Bootstrap 4 column is for and the height of the container. For example, xs is for small screens, such as phones.

When a column is prefixed with a smaller device, it will appear in the same way on larger devices. In other words, a column defined as sm will work for devices with a tablet size or larger.

Advantages of using columns:

1. Create horizontal sections in the viewport.
2. They can have different widths.
3. They can vary in width at different screen widths.
4. The ability to prototype horizontally from left to right, then vertically up and down.
5. Can change position (reorder) with respect to siblings on the same line.
6. They have the same height as other brothers and sisters on the same line.
7. Can “grow” or “shrink” in width.
8. It can automatically “wrap” or “drain” vertically as needed or at different screen widths.
9. May contain more Rows & Columns__ nesting.

CSS structure update

After many years of waiting, Bootstrap 4 was released in January 2018. Bootstrap was the first widespread css framework. The new version of the program is based on this successful foundation and has many improvements, which simplifies the work with grids. Bootstrap 4 is an OG response layout. The new angular.json configuration file has a completely different structure than the original angular-cli.json.

If the user is going to focus on using the grid to create flexible layouts in Angular applications, he only needs to use the bootstrap-grid and bootstrap-reboot packages.

You can add Container CSS Bootstrap files directly to the “styles” property in angular.json. Importing a grid into the main style.scss file has one important advantage over importing into an angular.json file. It allows you to override any variable used by Bootstrap style definitions.

In practice, it may be useful to create a styles-variables.scss file next to styles.scss in the src folder with responsive layout breakpoints, as defined by default in Bootstrap. Using styles-variables.scss makes it possible to override the default grid and implement custom custom styles.

Thus, you can import it into the first line - styles.scss, which will be used with Bootstrap, but also in any other component styles file for the consistent implementation of the user reaction.

Bootstrap Instruction for Beginners

Bootstrap is a very useful front-end platform for faster and easier web development. The user does not have to worry about having practical experience, having a powerful interface when using it.

The Bootstrap Starter Guide covers the following procedures that will require:

1. Download or enable Bootstrap.
2. Write Basic HTML Code.
3. Enable Bootstrap CSS.
4. Enable jQuery Library Enable Bootstrap JavaScript.
5. Add IE8 support for HTML5 and multimedia queries.
6. Add navigation bar.
7. Add container page content.
8. Add a title.
9. Add a table.
10. Add a form inside the table.
11. Add Bootstrap Button with Glyphicon.
12. Add a box with a good search.
13. Final Code and Live Demo.
14. Online Resources.

The following sections will be a step-by-step guide for the first web development with Bootstrap.

Download CDN and HTML5

There are several ways to use Bootstrap on a web page.

One of them is to use the CDN or Content Delivery Network. Using bootstrap CDN means that the user will not download and save boot files on the server or on the local computer. To do this, create a new index.html file. Open the file, put the following code and save it.

If the user wants to use his copy, write:

You need to make sure the file is uploaded. Then put it in the same directory as index.html, for example, in the “bootstrap-4” folder.

jQuery is required for the Bootstrap JavaScript function to work.

If you need to use your copy of jQuery:

First you need to make sure that jQuery is loaded and placed in the same directory as index.html, for example, the jQuery file name is “jquery-3.0.0.min.js”.

Container-fluid is the main element with 100% width of the user layout, performing side indents for the design of columns. Bootstrap Container fluid creates full width, like container-fluid on smaller devices.

JavaScript and IE8 support

Bootstrap features, such as the navigation bar, need a Bootstrap JavaScript file. To do this, put the following code after the code of the previous section:

You also need to add IE8 support for HTML5 and media queries.

Bootstrap is a base that is interconnected with mobile technology, so it responds to various devices and screen sizes.

Navigation panels are very cool. Users will not search for data on the site if the Bootstrap container in the center is used correctly. To do this, put the following code in the tag.

The div tag will have the content of the website. This is important because it determines the width of the content page. It will not be scattered if the visitor uses a large screen size. To add a content container, put the following code in the code of the previous section.

Table header layout

The title is important because it tells the user which page it is on. Put the following code between the "container div" tags of the previous section.

In this example, there is a table in which form elements, such as a text field, will be stored. The desktop looks good, has no freezing effect and responds well to user actions. To do this, put the following code in the previous section.

An example of this form will contain several text fields, a text area and a drop-down list. To do this, replace the code in the previous section with the following.

Adding a GLYPHICON Button

Glyphicon is a library of monochrome icons and symbols, created with emphasis on simplicity and convenient orientation.

Buttons with icons look nice, and the library signals the user what the button is for. The icon and color of the button can easily tell what the button does in the web application.

To do this, put the following code between the "last tags" of the previous section.

And you can also add notes using bootstrap by placing the following code before “opening the dev tag” in the previous section.

If the user downloads the code, in addition to the source, he will receive the following message:

Obviously, Bootstrap offers the user many great tools to speed up the process of developing software applications. This saves many hours and even days when developing and coding an amazing user interface.

Software components and plugins are carefully documented, filled with live examples and code blocks for the convenience of users. Bootstrap is a very decent tool for the development and design of mobile websites, it allows you to first develop a structure, and later - fonts, color and style. It only takes some time to learn the capabilities of the method and use it in the best way.