Bootstrap 4 installation. Automatic column layout

Based on the number of stars on GitHub.

If you want to master Bootstrap, in particular its latest, fourth version, then this material has been prepared especially for you. Here, using a small end-to-end example that can really be mastered in half an hour, the basics of Bootstrap will be demonstrated, once you understand them you will be able to do something of your own using this framework.

Prerequisites This material is aimed at beginning web developers who have a basic understanding of HTML, CSS, and jQuery.

Here is a one-page website that we will talk about creating using Bootstrap.

Ready-made project created using Bootstrap

Npm install bootstrap
Bootstrap can be connected to a page using a content delivery network. To do this, add the following link to the tag:

The latest version of Bootstrap can be downloaded from here and used locally.

The project structure should look like the following figure.

Project structure About the capabilities of Bootstrap 4 The first stable version of Bootstrap 4 was released at the end of January this year. Bootstrap now includes some interesting features that were not present in its previous version. Namely, if we talk about improvements and changes, we can note the following:

• Bootstrap 4 was rewritten using flexbox technology, while Bootstrap 3 used float technology. If you're not familiar with flexbox, take a look at this resource.
• Bootstrap 4's CSS uses rem units, whereas previously it used px units. you can find out how they differ.
• Some components, such as panels, have been removed. You can find details about the changes made in Bootstrap 4.

In fact, Bootstrap 4 has a lot of new things compared to Bootstrap 3, if you need it, you can familiarize yourself with these innovations. We are now starting to work on our educational project. Bootstrap Grid System The Bootstrap Grid System is designed for creating page layouts. It makes it easy to develop responsive websites. In the new version of Bootstrap, the class names have not changed (it should be noted that class.xs no longer exists).

The grid is divided into 12 columns, this structure, configured as the developer needs, is the basis of the page layout.

In order to use the Bootstrap grid, you need to add the .row class to the main element of the page. When setting the sizes of nested elements, the following classes are used (instead of an asterisk at the end of the class name, the number of columns of the basic 12-column grid that a particular element should occupy is indicated):

• col-lg-* - class used for pages intended for large-screen devices such as laptops;
• col-md-* - class for pages designed for medium-sized screen devices, such as tablets;
• col-sm-* - class for pages that are designed for small screens, such as those found on smartphones.

Navigation Bar Navigation bars in Bootstrap are created using the .navbar class. In fact, it is a wrapper in which the elements that form the navigation bar are placed. Below is the panel we will now create. It is located at the top of the page and does not disappear when scrolling.

Navigation bar

So, in order for a navigation bar to appear on the page, we’ll add a tag to index.html with the class .navbar , inside of which, using other classes like .navbar-brand , .navbar-toggler and .nav-item , we create some special elements and structure of the site navigation system. The .fixed-top class allows you to fix the navigation bar at the top of the page. Here is the navigation bar layout:

Home

• About
• Portfolio
• Team
• Post
• Contact

Now let's create a main.css file and connect it to the page by placing the following in the index.html file tag:

This will allow you to customize the styles of page elements by placing CSS rules in this file. Let's add rules to this CSS file that set the color design of the navigation bar:

Navbar( background:#F97300; ) .nav-link , .navbar-brand( color: #f4f4f4; cursor: pointer; ) .nav-link( margin-right: 1em !important; ) .nav-link:hover( background : #f4f4f4; color: #f97300; ) .navbar-collapse( justify-content: flex-end; ) .navbar-toggler( background:#fff !important; )
The new Bootstrap grid is based on flexbox, so you need to use the appropriate properties to align content. For example, in order to place the navbar menu on the right, you need to use the justify-content property and set its value to flex-end:

Navbar-collapse( justify-content: flex-end; )
To customize the background color of the navigation bar, you can use the classes .bg-light (light background), .bg-dark (dark background) and .bg-primary (primary background color). We use the following settings:

Bg-dark( background-color:#343a40!important ) .bg-primary( background-color:#343a40!important )

Page header The following tag is used to describe the page header:

Let's prepare a layout for the page header. We want it to occupy the entire height of the window, so jQuery will come in handy here. Let's create a main.js file and connect it to index.html before the closing tag:

Let's add the following to the main.js file:

$(document).ready(function())( $(".header").height($(window).height()); ))
It would be a good idea to place some nice background image in the page header. Let's do it like this:

/*header style*/ .header( background-image: url("../images/headerback.jpg"); background-attachment: fixed; background-size: cover; background-position: center; )
This is what we ended up with.

Page header with background image

For now, the site's header looks a little empty, so let's add an element to it, assigning it the class .overlay , which will lead to the creation of a block that is located on top of the background image of the header. Let's change the section of the index.html file where we described the header as follows:

Then, in main.css, add the following:

Overlay( position: absolute; min-height: 100%; min-width: 100%; left: 0; top: 0; background: rgba(244, 244, 244, 0.79); )
Now let's add a description of the project to the header. We will place it in a new element with the class .containter . This is a helper class for the Bootstrap framework designed to lay out content based on the needs of a responsive layout. Here's how the markup will change in this step:

Now let’s add another element here, to which we’ll assign the class.description:

▍ Hello ,Welcome To My officail Website

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

See more
We will also assign the class .text-center to this tag, which will allow its content to be aligned to the center of the page. There is a button at the end of the site description. Let's talk about how to set it up.

Buttons Bootstrap provides many classes for buttons. You can see some examples of button design. We, as you can see in the markup example from the previous section, added the classes .btn and to the element. btn-outline-secondary .

Now let's set up styles for the class.description:

Description( position: absolute; top: 30%; margin: auto; padding: 2em; ) .description h1( color:#F97300 ; ) .description p( color:#666; font-size: 20px; width: 50%; line-height: 1.5; ) .description button( border:1px solid #F97300; background:#F97300; color:#fff; )
This is what the page header will look like after completing the above steps:

Page header containing a description of the project About Section First, let's look at what we want to create. Here is a section of the page with information about the web developer.

About section

Here we'll use Bootstrap's grid capabilities to create a two-part section layout. Let's get started by adding a .row class to the section's parent element:

The first part of the layout will be located on the left, it will contain a photo. The second part, located on the right, contains a description.

Here's what the markup on the left side of this section looks like:

// left side S.Web Developer
And this is what will happen after the description of the right side of the layout is added here:

S.Web Developer ▍D.John

Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

Note the setting of column widths using the col-lg-* , col-md-* , and col-sm-* classes described above.

Here are the styles for all of this:

About( margin: 4em 0; padding: 1em; position: relative; ) .about h1( color:#F97300; margin: 2em; ) .about img( height: 100%; width: 100%; border-radius: 50% ) .about span( display: block; color: #888; position: absolute; left: 115px; ) .about .desc( padding: 2em; border-left:4px solid #10828C; ) .about .desc h3( color: #10828C; ) .about .desc p( line-height:2; color:#888; )

Portfolio Section Let's now move on to the section in which the developer's portfolio will be presented. It will contain a gallery of works.

Portfolio section

When creating the layout of this section, the same principles of working with the grid that we discussed above are applied:

Portfolio
Adding the .img-fluid class to each of the images makes them responsive.

Each element in our gallery, on medium and large screens, occupies 4 columns (remember - class col-sm-12 is used for devices with small screens, class col-md-4 is used for medium screens, col-lg-4 - for devices with large screens). As a result, on large and medium screens, one element will account for approximately 33.3% of the container element; on small devices, each element will occupy the entire screen (12 columns).

Styling the gallery of works:

/*Portfolio*/ .portfolio( margin: 4em 0; position: relative; ) .portfolio h1( color:#F97300; margin: 2em; ) .portfolio img( height: 15rem; width: 100%; margin: 1em; )

Blog section and working with cards Let's talk about creating a section that contains announcements of materials from the blog maintained by our conditional web developer.

Blog section

To create this section, we will need so-called cards (cards in Bootstrap terminology).

To create a card, you need to include an element in the layout and add the .card class to it. You can use the following classes to configure various card elements:

• .card-header: header
• .card-body: main content
• .card-title: title
• .card-footer: footer
• .card-image: image

The HTML markup for this section will look like this:

Blog Post Title

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more Post Title

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more Post Title

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more
Here are the styles for the cards:

Blog( margin: 4em 0; position: relative; ) .blog h1( color:#F97300; margin: 2em; ) .blog .card( box-shadow: 0 0 20px #ccc; ) .blog .card img( width: 100%; height: 12em; ) .blog .card-title( color:#F97300; ) .blog .card-body( padding: 1em; )
This is what our one-page page will look like after creating the Blog section:

Page after adding the Blog section Team Section This section will contain information about the project team.

Team section

To form this section, we will use a grid, dividing the available space equally between the images. Each image (on large and medium screens) will occupy 3 grid columns, which is 25% of the total space.

Here is the HTML markup for this section:

Our Team Sara Manager Chris S.enginner Layla Front End Developer J.Jirard Team Manger
And here are the styles:

Team( margin: 4em 0; position: relative; ) .team h1( color:#F97300; margin: 2em; ) .team .item( position: relative; ) .team .des( background: #F97300; color: #fff ; text-align: center; border-bottom-left-radius: 93%; transition:.3s ease-in-out; )
Let's decorate this section with animation that appears when you hover your mouse over the images. It should look like the image below.

Animation when hovering the mouse over an image

In order to achieve this effect, add the following styles to main.css:

Team .item:hover .des( height: 100%; background:#f973007d; position: absolute; width: 89%; padding: 5em; top: 0; border-bottom-left-radius: 0; )

Feedback form This section of the page will contain a form with which site visitors can send messages to the site owner. Here, as usual, in order to style the elements and ensure their responsiveness, we will use the capabilities of Bootstrap.

Feedback form

Like Bootstrap 3, Bootstrap 4 uses the .form-control class for input fields, but now there's something new. For example - instead of the obsolete class.input-group-addon, the new class.input-group-prepend is used (for icons and labels). More details on this can be found in the Bootstrap 4 documentation. In our case, each input field will be placed in an element that is assigned a .form-group class.

Let's add the following to the index.html file:

Get in Touch
Here are the styles for the feedback form section, which should be placed in the main.css file:

Contact-form( margin: 6em 0; position: relative; ) .contact-form h1( padding:2em 1px; color: #F97300; ) .contact-form .right( max-width: 600px; ) .contact-form . right .btn-secondary( background: #F97300; color: #fff; border:0; ) .contact-form .right .form-control::placeholder( color: #888; font-size: 16px; )

Fonts Standard fonts are not suitable for everyone. We took advantage of the Google Font API to use the Raleway font in our project. It will look very good here. To import the font, add the following directive to the main.css file:

@import url("https://fonts.googleapis.com/css?family=Raleway");
Next, let's set global styles for various HTML tags:

Html,h1,h2,h3,h4,h5,h6,a( font-family: "Raleway"; )

Scrolling Effects The image below shows the page behavior we want to achieve.

Scrolling the page when clicking links in the navigation bar

In order for the page to smoothly scroll to the desired section when clicking on the navigation bar links, we will need to resort to the capabilities of jQuery. If you are not very familiar with this library, know that there is nothing complicated here - just add the below code to the main.js file:

$(".navbar a").click(function())( $("body,html").animate(( scrollTop:$("#" + $(this).data("value")).offset( ).top ),1000) ))
After that, add a data-value attribute to each of the links in the navigation bar and make the markup look like this:

About

Portfolio

Blog

Team

Contact

In order for all this to finally work, all that remains is to add the id attribute to the main element of each section of the page. In this case, you need to make sure that its value is identical to that specified in the data-value attribute of the corresponding link. For example, here is the corresponding attribute for the About section:

This completes our example. Add tags

Bootstrap v4.0.0-alpha.4 is available for download in several ways, including some of your favorite package managers. Choose from the options below to get just what you need.

Source files

Download everything: Sass sources, JavaScript, and documentation files. Requires Sass compiler Autoprefixer, postcss-flexbugs-fixes and some installations.

Package Managers

Pull Bootstrap source files into almost any project with some of the most popular package managers. Regardless of package manager, Bootstrap will require a Sass compiler, Autoprefixer, and postcss-flexbugs-fixes to install, which matches our official compiled versions.

Attention! Not all package managers have v4 alpha published, but we should have them soon!

npm

Install Bootstrap in Node-enabled applications with the npm package:

$ npm install [email protected]

require("bootstrap") will load all Bootstrap jQuery plugins onto a jQuery object. The bootstrap module itself does not export anything. You can manually load Bootstrap jQuery plugins individually by loading the top-level /js/*.js files into the package directory.

Bootstrap package.json contains some additional metadata in the following sections:

• sass - path to Bootstrap main source Sass file
• style - the path to Bootstrap uncompressed CSS that has been pre-compiled using the default options (no customization)

RubyGems

Install Bootstrap in Ruby applications using Bundler (recommended) and RubyGems by adding the following line to your Gemfile:

gem "bootstrap" , "~> 4.0.0.alpha3"

Additionally, if you don't use Bundler, you can install the gem by running the following command:

$ gem install bootstrap -v 4.0.0.alpha3

See gem README for more information.

Meteor $ meteor add twbs:bootstrap@= 4.0.0-alpha.4 Composer

You can also install and manage Bootstrap Sass and JavaScript via

Hi all! In the previous article we looked at what Boostrap is and why it is needed, and in this article we will look at how to install and start using Bootstrap 4.

Go to the official website and download Bootstrap 4 by clicking the Download button. You will find many different ways to download and install this framework: npm, composer, bower and others. It is also possible to download only some of the files you need, download sources, and so on.

You can choose any of the methods and download the framework to your computer or go to the Introduction section (in the right column on the site), find the Starter template section there, copy all the code written there, create a folder where we will work with the framework, in it create a file index.html and paste the code copied earlier there.

Hello, world!

Briefly about what is happening here: this is a basic template in which all the necessary CSS and JS files are connected using a CDN, and the viewport meta tag is also set for mobile devices. Basically, that's all. Thanks to CDN, we do not need to download all the necessary files, but only the Internet.

In this lesson we will learn how to download and connect the Bootstrap framework (version 3 or 4) to the site.

Bootstrap Learning Toolkit

Minimum set of tools (programs) for creating web projects using the Bootstrap framework:

• text editor for working with code (Notepad, Brackets, Notepad++, etc.);
• browser (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer, etc.).

Downloading the Bootstrap framework

Creating a web project whose design is based on the Bootstrap framework always begins with downloading it. There are various ways to download the Bootstrap framework. For example, through a link located on the site getbootstrap.com or using the package manager npm, Composer, Bower, or others. How to do this depends on your experience or specific situation.

How to install the Bootstrap framework using package managers, as well as how to build it using Grunt, can be read in this article.

The easiest way to download is to use the link. There are 2 links on the Bootstrap site.

The first link contains ready-to-use CSS and JavaScript files. This assembly is mainly used for studying the framework or for use in projects, the design of which can be made in the default styles laid down by the authors.

Download Bootstrap 3.4.1 Download Bootstrap 4.3.1

The second link contains the framework in source code. This version is more convenient for website development, because... makes it very easy to change styles, colors of components, configure them, etc. But these source files, before being used on the page, will need to be compiled and minified. This process is usually automated, for example, using Gulp.

Bootstrap 3.4.1 source codes Bootstrap 4.3.1 source codes Unpacking the Bootstrap archive

After downloading the archive (with ready-to-use CSS and JavaScript files), you need to unpack it into the directory of your web project.

If you look at the archive, you will notice that it has the following content (using Bootstrap 3.4.1 as an example):

Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├ ── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.tt f └ ── glyphicons-halflings-regular.woff

The css directory contains the styles of the Bootstrap framework, and the js directory contains plugins for making some components work. The plugins are written using jQuery library functions. Therefore, before Bootstrap JS you need to include the jQuery library.

As you can see, the archive contains 2 versions of CSS and JavaScript files, i.e. with and without the min suffix. The version of the file with min is no different from without min , it is simply minimized (compressed).

In production (on a production site), it is better to use minimized versions of files. These files are smaller in size and therefore ensure faster loading of site pages.

Non-minified versions are more convenient to use during development, as well as for studying.

In addition to these files, this archive also includes the icon font "Glyphicons". The Glyphicons font features over 250 icons from the Glyphicon Halflings set. The font is presented using 4 files: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff).

Such a variety of formats for the same font is necessary to ensure its display in all browsers.

You can read about icons in font format, as well as what advantages and disadvantages they have, in this article.

The Bootstrap 4 framework archive is practically no different from Bootstrap 3. Its main difference is that it does not contain the "Glyphicons" font. If you need font icons, you will need to connect them yourself. For example, using one of the following sets: FontAwesome, Octicons, Glyphicons, IcoMoon, or others. If you do not want to use a ready-made font, but create your own, which will consist only of the necessary icons, then use this information.

In addition, the Bootstrap 4 archive also contains the bootstrap-grid.css and bootstrap-reboot.css files. These files are necessary only for those who do not need the whole framework, but only part of it.

The first file (bootstrap-grid.css) contains the Bootstrap grid, and the second (bootstrap-reboot.css) is a normalizer that sets the basic styles so that they are the same for all HTML elements in all browsers.

Connecting Bootstrap to an HTML page

The installation process of the Bootstrap 3 framework consists of connecting the following files to the HTML 5 page:

Bootstrap CSS (bootstrap.min.css);

The latest version of the jQuery library (required for Bootstrap JS plugins to work);

Bootstrap JavaScript (bootstrap.min.js).

Note: It is better to include JavaScript files before the closing body() tag, as this will ensure that the main content of the web page loads and displays faster.

...

Connecting the Bootstrap 4 framework is done like this:

...

You can also connect Bootstrap 4 using a CDN (you do not need to download Bootstrap into the project):

Copied

...

CDN Bootstrap 3.4.1:

Copied

To test the functionality of the framework, we will create a button that, when touched, will display a popover tooltip.

Bring the cursor to me $(function () ( $("").popover((trigger:"hover")); ));

An article in which we will analyze the Bootstrap 4 grid, which is used to create responsive website layouts.

Grid purpose

The Bootstrap 4 grid framework is designed for creating responsive website layouts.

The Bootstrap 4 grid is based on CSS Flexbox and CSS media queries. Studying them will allow you to understand in more detail how the Bootstrap 4 grid works.

An adaptive layout is a layout that can change its appearance depending on the width of the main area (viewport) of the browser. This means that at some viewport widths the responsive layout may look one way, but at others it may look completely different.

In Bootstrap 4, changing the appearance of the layout is implemented through media queries. Each media request in Bootstrap is based on the minimum width of the browser viewport (breakpoint, breakpoint, device name).

The Bootstrap 4 framework has 5 breakpoints or device names (unlabeled, sm, md, lg, xl), and therefore allows you to create a layout that can look different on each of them.

In Bootstrap 4, compared to Bootstrap 3, the number of breakpoints has been changed. In Bootstrap 3 there were four of them: xs, sm, md and lg.

Grid elements

The Bootstrap 4 grid consists of the following elements:

• Wrapping containers (container and container-fluid);
• Rows (row);
• Adaptive blocks (col).

Wrap containers

A wrapper container is a Bootstrap 4 grid element from which the creation of a responsive page or block layout begins. Other grid elements (rows and adaptive blocks) must be placed inside it.

Bootstrap 4 has 2 types of container wrappers: responsive-fixed and responsive-fluid.

HTML markup of a responsive-fixed container:

...

HTML markup of the responsive rubber container:

...

The first (responsive-fixed) container is used when you need to create a layout with a width that needs to remain constant within a certain browser viewport width.

The dependence of the width of an adaptive-fixed container on the width of the browser viewport is shown in the table:

This means that an adaptive-fixed container will have:

• 100% width for viewport width up to 576px;
• 540px with viewport width from 576 to 768px;
• 720px with viewport width from 768 to 992px, etc.

In the horizontal direction, the fixed-responsive container is positioned centered, this is done in bootstrap.css via the CSS properties margin-left: auto and margin-right: auto .

The second (responsive rubber) container is used when you need to create a completely flexible layout of a page or some block. This container has 100% width for any viewport width.

In addition, wrapper containers (container and container-fluid) also have internal padding on the left and right of 15px. Setting padding for wrapping containers is done in the Bootstrap 4 CSS file using the padding-left: 15px and padding-right: 15px properties.

When creating a layout using the Bootstrap 4 grid, do not place wrapper containers inside others.

Rows

A row is a special grid element (row) that is used when creating a layout in the following cases:

• between the container and the adaptive blocks that need to be placed in it;
• between one and other adaptive blocks, which must be placed in the first adaptive block.

Row HTML markup:

...

Unlike Bootstrap 3, in which the row acted only to compensate for the left and right internal padding of wrapper containers or responsive blocks, in Bootstrap 4 it plays a very important role. This is due to the fact that this grid is built on CSS Flexbox. In this grid, it acts as a flex container for flex elements (adaptive blocks). Those. if you use adaptive blocks outside the row, they will not work. In Bootstrap 4, responsive blocks must be in a block with the row class.

Compensation for internal padding of margins is carried out in the same way as in Bootstrap 3, due to negative left and right margins equal to 15px (margin-left:-15px and margin-right:-15px).

An example of how field padding is compensated:

container (+15px) -> row (-15px) -> col (+15px) -> content container-fluid (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> content

As a result, the margin from the left and right edges of the wrapping container to the content will always be 15px.

In addition, adaptive blocks that are logically unrelated to each other do not have to be placed in one row within the framework of some kind of wrapper container or other adaptive block. The most correct way is to divide them into separate logical groups and place each of them in a separate row.

For example:

... … … … ...

Adaptive blocks

Adaptive blocks are the main building blocks of a responsive layout; they will determine how the web page layout will look at different control points (no symbol, sm, md, lg and xl).

Creating an adaptive block is very simple: by adding one or more classes col-?-? to the required HTML element.

In the class, instead of the first question mark, the name of the control point is indicated: no designation, sm, md, lg or xl. Instead of the second question mark, the width of the adaptive block is indicated, which it should have at the specified control point. The width of the responsive block is specified in relative form using a number from 1 to 12 (Bootstrap columns).

This number determines how much of the width the adaptive block will occupy at the specified control point from the width of the parent block, i.e. row. The row width in numerical terms (Bootstrap columns) is 12.

For example, a block with class col-md-4 at control point md will occupy 4/12 of the row width, i.e. 33.3% (i.e. 4/12*100% = 33.3%).

Adaptive blocks, as well as containers, have 15px left and right padding. These paddings for adaptive blocks of the Bootstrap 4 framework are set using the CSS properties padding-left: 15px and padding-right: 15px.

Adaptive blocks must be placed in a row. Those. Any adaptive block must have a block with class row as its parent.

For example, consider how wide the following responsive block will be on each device:

...

This adaptive block will have:

• up to sm (by xs) a width equal to 12 Bootstrap columns (i.e. 12/12*100%=100% of the row width);
• on an sm device, a width equal to 9 Bootstrap columns (i.e. 9/12*100%=75% of the row width);
• on an md device, a width equal to 7 Bootstrap columns (i.e. 7/12*100%=58.3% of the row width);
• on an lg device, a width equal to 5 Bootstrap columns (i.e. 5/12*100%=41.6% of the row width);
• on an xl device, a width equal to 3 Bootstrap columns (i.e. 3/12*100%=25% of the row width).

In addition, when specifying the width of the adaptive block for some control point, it will apply not only to this point, but also to all subsequent ones, if they are not specified.

A responsive block on md and lg devices will have a width equal to 6 Bootstrap columns: (12) -> sm(6) -> md -> lg -> xl(3) .

A responsive block on an sm device will have a width equal to 8 Bootstrap columns, and on lg and xl devices it will have a width equal to 4 Bootstrap columns: (8) -> sm -> md(4) -> lg -> xl .

The responsive block on all devices will have a width equal to 6 Bootstrap columns: (6) -> sm -> md -> lg -> xl .

Adaptive blocks without columns

Special classes col , col-sm , col-md , col-lg , col-xl , col-auto , col-sm-auto , col-md-auto , col-lg-auto and col-xl have been added to the Bootstrap 4 grid -auto .

The first group of classes (col, col-sm, col-md, col-lg, col-xl) is intended for creating adaptive blocks, the width of which will depend on the free space of the line. The unoccupied width (free space) of the line is distributed evenly between all such blocks. In addition, these adaptive blocks have a zero width before allocating free line space (by default).

Let's look at a few examples.

1. Create 5 adaptive blocks with the same width in a row.

1/5 2/5 3/5 4/5 5/5

Width calculation:

• free line space - 100% (since their width is 0);
• the width of each adaptive block is 20% (100%/5);

2. The width of blocks with class col if there is an adaptive block with the number of columns in the line.

? 7 columns? ?

Width calculation:

• free line space - 41.67% ((12-7)/12*100%);
• the width of each adaptive block, except col-7, is 13.89% (41.67%/3).

In some versions of Safari browsers there is a bug when using such markup; it can be broken into several lines.

There are 2 ways to fix this:

• by setting the adaptive blocks border.col ( border: 1px solid transparent; )
• by setting the responsive blocks CSS property flex-basis .col ( flex: 1 0 20%; )

In addition, the Bootstrap 4 grid allows you to place responsive blocks without specifying the number of columns on several lines.

... ... ... ...

This action is carried out by adding an empty div element with class w-100 to the markup before the adaptive block, which should start with a new line.

If this action needs to be used only for some control points, then you also need to add Bootstrap 4 responsive utility classes to it (the w-100 class).

In this example, adaptive blocks will be transferred to a new line only on devices with a tiny or small viewport.

... ... ... ...

The second group of classes (col-auto, col-sm-auto, col-md-auto, col-lg-auto and col-xl-auto) is designed to create adaptive blocks, the width of which will be determined according to their content.

For example:

(1) (2) - the width at the md, lg and xl control points will be determined based on the content (3)

As a result:

• on xs and sm adaptive blocks will be located vertically (one below the other) and occupy the entire width of the row;
• on md, responsive block 2 will have the width needed to display its content; if block 2 does not occupy the entire width of the row, then adaptive blocks 1 and 3 will divide it equally among themselves; if block 2 occupies the entire width of the line, then the picture will be the same as at control points xs and sm;
• on lg and xl, responsive block 2 will have the width required to display its content; if block 2 does not occupy the entire width of the row, then block 3 will occupy a width equal to 2 Bootstrap columns, and block 1 will occupy the entire remaining width of the row; if block 2 occupies the entire width of the row, then the markup will be the same as on xs and sm, only block 3 on 3 lines will have a width equal to 2 Bootstrap columns.

Arrangement of adaptive blocks in a row

By default, adaptive blocks in a row are arranged in horizontal lines. Within the horizontal line, adaptive blocks are lined up sequentially from left to right. Adaptive blocks with a total number of columns of no more than 12 can fit into one horizontal line. Adaptive blocks that do not fit into the current line move to the next one.

(1) (2) (3) (4)

Let's look at another example in which adaptive blocks have different widths at different control points:

The basic principle of layout layout

The basic principle of laying out a web page layout on the Bootstrap 4 grid is to nest some adaptive blocks within others.

At the same time, the width of adaptive blocks is always a relative value, which is set in the Bootstrap columns and depends only on the width of the parent, i.e. row.

Web page content should only be placed in responsive blocks.

For example, in the existing layout, namely in the adaptive block col-8, we will add 2 more blocks:

... ...

To do this, you first need to put a row (container for adaptive blocks) in the col-8 block:

... ... Bootstrap 4 - Inserting a row into the content of a responsive block col-8

After that, add 2 adaptive blocks in a row:

... ... ... Bootstrap 4 - Inserting responsive blocks in a row

Aligning Adaptive Blocks

Aligning adaptive blocks in the horizontal and vertical directions is done in Bootstrap 4 using utility flex classes.

Vertical alignment of responsive blocks

The vertical alignment of adaptive blocks within a row line is carried out using one of the following classes, which must additionally be added to row:

• align-items-start (relative to line start);
• align-items-center(center);
• align-items-end (relative to the end).

For example, let's align all adaptive blocks to the center of the row line:

1/2 2/2

By default, responsive elements occupy the entire height of the row line in which they are located.

The vertical alignment of a specific adaptive block within a line can be carried out by one of the following classes:

• align-self-start (relative to line start);
• align-self-center (center);
• align-self-end (relative to the end).

These classes must be added to adaptive blocks, not to a row.

For example, we align adaptive block 2 to the bottom edge of the line:

(1) (2)

Horizontal alignment of adaptive blocks

The following classes are intended for aligning adaptive blocks in the horizontal direction:

• justify-content-start (relative to the start of the row line - default);
• justify-content-center (center);
• justify-content-end (relative to the end of the line);
• justify-content-around (evenly, taking into account the space before the first and last adaptive block);
• justify-content-between (evenly, with equal space between responsive blocks).

For example, let's distribute adaptive blocks in the horizontal direction evenly:

(1) (2)

Responsive borderless layout

Internal padding of adaptive blocks and external negative margins of rows can be removed if the no-gutters class is added to the latter (i.e. row).

... ... ...

Please note that this class (no-gutters) only affects adaptive blocks that are directly placed in this row. Those. CSS properties for removing padding will not apply to adaptive blocks that do not have this row as a parent.

In Bootstrap 4, responsive block offsets can be done using:

• classes offset (for a certain number of columns);
• service (utility) margin classes.

offset classes

The offset classes are designed to shift adaptive blocks to the right by a certain number of columns.

These classes have the following syntax:

Offset-(1) or offset-(breakpoint)-(1)

(breakpoint) – control point, starting from which an offset will be applied to this block (if it is not specified, then the offset will be applied starting from the smallest devices).

(2) – the offset value specified using the number of Bootstrap columns.

As an example, let's set the offset to the adaptive blocks as shown in the figure.

(1) (2) (1) (2) (1)

Offset using margin classes

In the fourth version of Bootstrap, you can also set the offset for adaptive blocks using margin indents (margin-left: auto and (or) margin-right: auto). This offset option comes about because the grid in the new version of Bootstrap (4) is based on CSS Flexbox.

This displacement option (using margin classes) is used when blocks need to be shifted relative to each other by some variable amount.

In Bootstrap 4, for a more convenient and adaptive setting of margin indents for blocks (margin-left: auto and (or) margin-right: auto), you can use the classes ml-auto , mr-auto , ml-(breakpoint)-auto and mr-( breakpoint)-auto .

Bootstrap 4 - Responsive Block Offset

(1) (2) (1) (2) (3) (1) (2)

Changing the visual order of adaptive blocks

By default, responsive blocks are visually displayed in the order in which they are located in the HTML code.

Changing the visual order of a responsive block in Bootstrap 4 is done using the order-(visual_number) class. This class is for the xs checkpoint. If the order of an element needs to be determined not for the control point xs, but for sm, md, lg or xl, then the following version of this class is used:

Order-(breakpoint)-(visual_number)

Instead of (visual_number) you must specify a number from 1 to 12.

This number determines how the elements will visually appear on the page. Namely, all adaptive elements will visually follow in ascending order of these numbers. If an element does not have an order class set, it defaults to 0.

For example, let's change the order of two adaptive blocks:

First (not ordered, without order- class) Second, but will be displayed last Third, but will be displayed second

Another example (using adaptive order classes):

First (on xs, sm will be displayed second) Second (on xs, sm will be displayed first)

In addition to numbers (from 1 to 12 by default), you can also use the words first and last . These classes (order-first, order-(breakpoint)-first, order-last, order-(breakpoint)-last) allow you to visually move an element to the beginning or end, respectively.

The order-first and order-(breakpoint)-first classes exert their effect by setting the element's CSS order property to -1 (order: -1), and the order-last and order-(breakpoint)-last classes set the CSS order property to value 13 (order: $columns + 1).

Let's rewrite the above example using the order classes, which use the first and last keywords:

First (on xs, sm will be displayed last) Last (on xs, sm will be displayed first)

An example using the order classes with both a number and the words first and last:

#1 (XS), #LAST (SM), #1 (MD, LG and XL) #2 (XS), #7 (MD, LG and XL) #3 (XS), #6 (MD, LG and XL ) #4 (XS), #5 (MD, LG and XL) #5 (XS), #4 (MD, LG and XL) #6 (XS), #3 (MD, LG and XL) #7 (XS ), #2 (MD, LG and XL) #8 (XS), #FIRST (SM), #8 (MD, LG and XL)

An example of adaptive layout on the Boostrap 4 grid

Let's create a responsive layout for the web page block shown in the figure using the Bootstrap 4 grid. Bootstrap 4 - Example of responsive block layout

1. Create block markup for mobile devices (xs).

(1) (2) (3) (4) (5)

2. Set up the markup for the sm control point:

(1) (2) (3) (4) (5)

3. Set the blocks to the number of columns they should have on md and lg devices:

(1) (2) (3) (4) (5)

4. Create markup for xl:

(1) (2) (3) (4) (5)

We remove unnecessary control points from adaptive blocks:

(1) (2) (3) (4) (5)

In addition, initially in Bootstrap 4 the responsive block has a width of 100%. This allows you to not specify the number of columns when creating adaptive blocks, if their initial width should be 12 columns (100%).

(1) (2) (3) (4) (5)