1. Bootstrap 4
December 17, 2018

2. FORMS
Bootstrap 4 provides two types of form layouts, stacked forms and inline forms
For a stacked form, add a wrapper element with class “form-control” around each form control to ensure proper margins
In an inline form, all of the elements are inline. This only applies to forms within viewports that are at least 576px wide. On screens smaller than 576px, it will stack horizontally.
This example adds the right margin class, mr-sm-2 class to inputs on devices small and up
It adds a margin bottom class, mb-2 to style inputs when they go from horizontal to vertical

3. Bootstrap Grids A bootrap grid needs to be placed in a container
The container class is a fixed width container with widths determined by screen sites. Equal margin on the left and right.
.container-fluid is a container that spans the full width of the screen

4. Grid CLasses The Bootstrap 4 grid system has five classes:
col- (extra small devices - screen width less than 576px)
col-sm- (small devices - screen width equal to or greater than 576px)
col-md- (medium devices - screen width equal to or greater than 768px)
col-lg- (large devices - screen width equal to or greater than 992px)
col-xl- (xlarge devices - screen width equal to or greater than 1200px)

5. Grid System RUles
Grid columns are created by specifying the number of 12 available columns you wish to span.
For example, three equal columns could use three col-sm-4
Each class scales up so this would produce three equal columns on sm, md, lg, and xl devices
The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as "equal width columns"

6. Flex
Flexbox has an easy-to-use layout that can be excellently utilized in responsive design, as it provides a flexible container that either expands or shrinks itself to fill the available space the best way.
The main advantage of this layout mode is that it makes the following layout tasks easier within a layout container:
Alignment of items
Specification of the layout direction
Specification of layout order of items

7. Using FLexBox Classes
To create a flexbox container and to transform direct children into flex items, use the d- flex class
Use .flex-row-reverse to right-align the horizontal direction
Use .flex-column to display the flex items vertically (on top of each other)
Use the .justify-content-* classes to change the alignment of flex items.
Easily add auto margins to flex items with .mr-auto or .ml-auto
Control the vertical alignment of gathered flex items with the .align-content-* classes

8. Resources
Adding Bootstrap 4 to Visual Studio 2017 ASP.NET Core 2.1:
Code:
Presentation: