Bootstrap 4 is a set of tools that includes many interesting and new features such as Flexbox, SASS for CSS styles, cards, compatibility with Font Awesome etc.
All these features will help you take your web projects to the next level using the latest web design and development standards. We have compiled a list of some of the best templates based on Bootstrap 4, which are available for free download, as well as several high-quality premium Bootstrap 4 templates.
There are many Bootstrap 4 UI kits available for you to start a web design project. Additionally, in this post we will look at a variety of templates that are built with Bootstrap 4 in many different styles, such as landing page templates, admin panel templates, blog templates, portfolio templates, etc.
If you're starting your Bootstrap 4 journey, we recommend using a popular UI kit like Paper Kit 2, which is based on Bootstrap 4 and offers professionally designed components and plenty of pre-built sections and example pages. A UI kit like Paper Kit 2 can help you in the long run and will cost you less if you are going to build multiple sites with Bootstrap 4. They also have a free version.
We've divided our collection of Bootstrap 4 templates into several sections to make it easier to find the template you need. You can go to any of the sections using the links below.
Bootstrap 4 Coming Soon TemplatesThe Coming Soon template is used before the actual launch of the website and is a kind of “stub”.
These templates usually contain a countdown timer and provide users with the option to contact website owners or sign up for a launch notification.
See the Coming Soon template below, built with Bootstrap 4.
Coming Soon Bootstrap 4(Free)
This Coming Soon Bootstrap 4 template created by the team at TemplateFlip. It features a full-screen background image along with modern typography and Font Awesome social icons.
The template already has a built-in email subscription form. This form is displayed when you click the “Notify Me” button.
The template is completely free under the CCA3 license and can be used for both personal and commercial projects.
Fluid – animated Coming Soon template (paid)
Fluid is a premium animated Coming Soon template built with Bootstrap 4. It offers four different options: Image Background, Graphic Background, Background Slider, and Minimal Layout.
The animation is equipped with CSS3, and Template PSD also provided with download.
Bootstrap 4 Templates Landing PageLanding Page templates are often used to demonstrate the features of a product, service, or application. They often have Call to action buttons so that users can try or research the product/service. They may also include sections such as user reviews and feature comparison tables, prices.
Below we place both free and paid Landing Page templates created using Bootstrap 4.
Material Landing (Free)
Material Landing is a landing page template built using the MDB UI Kit and Bootstrap 4.
It has a clean code look that is ideal for creating an optimized landing page for a product or agency or company website.
The template has sections designed in HTML5 template design to display the product/company features, best projects, pricing plan, and team members.
Captivating animations play as you scroll through the landing page.
Start Simple (Free)
Start Simple is another one free template landing page for startups and small businesses, built by the TemplateFlip.com team.
The template is based on Bootstrap 4 and features parallax scrolling in the header and a responsive animated slider for the user reviews section.
Awesome App (Free)
Awesome App is a free Landing Page template built with Bootstrap 4 and PaperKit 2. It is suitable for creating websites and landing pages mobile applications, as well as software products.
The template is designed by the team at TemplateFlip.com and it has a creatively designed landing page with a gorgeous color scheme.
The template has sections for showcasing app features, app screenshots, user reviews, app download links, etc.
And they are easy to customize and expand.
Pixels – creative App template Landing HTML5
If you love creativity and are looking for a stunning design for your app/product page or business purpose, then this premium Bootstrap 4 Pixels template will be best suited for you.
Offering over 15 different designs, this template has MailChimp integration as well as a working form feedback.
Bootstrap 4 Startup/Agency TemplatesThe Startup/Agency template is suitable for any business that would like to showcase their services.
Below are some of the best Bootstrap 4 templates that are suitable for startups and companies.
Agency (Free)
As the name suggests, this is a free agency and small business website template that was created using Bootstrap 4. It has sections home page, such as portfolio grid, responsive timeline, team member list and more.
Bell Bootstrap 4 Theme (Free)
Bell is a one-page Bootstrap 4 template suitable for any type of business website. It includes parallax blocks with animated scrolling and is available for free, and also has paid version, which includes premium email support.
Fitness (Free)
Fitness is a free, clean source website template built with HTML5, Sass, jQuery, Bootstrap 4 and Gulp.
A PSD version of this template is also included in the free version.
Bootstrap 4 Admin Panel TemplatesBootstrap is the default choice for many web designers and developers when it comes to creating a website or application admin panel template. Using Bootstrap, you can create a responsive admin dashboard with advanced controls and user interfaces.
Below you can find paid and free Bootstrap 4 Admin dashboard templates.
Light Bootstrap Dashboard (Free)
This is a Bootstrap 4 admin template created by CreativeTim.
It has a simple and clean design and offers a set of ready-made components, plugins and example template pages to get you started with creating admin panels, for web applications, and CMS or CRM.
This is a free Bootstrap admin template that is completely usable in your projects. If you need additional components, plugins and sample pages, you can upgrade to the PRO version.
The PRO version also gives you access to full documentation, SASS files, as well as Sketch files for the template.
Modular Admin (Free)
Modular Admin is a free and MIT-centric dashboard theme built on Bootstrap 4. This dashboard theme is built in a modular way that makes it easy to scale, modify, and maintain. Documentation for getting started with this template is provided in the GitHub repository.
CoreUI Bootstrap 4 Admin (Free)
CoreUI is another free and open source (MIT) Bootstrap template. CoreUI is based on Bootstrap 4 and offers 6 versions: HTML5 AJAX, HTML5 Static, AngularJS, Angular 2+, React.js and Vue.js.
Pages – Bootstrap 4 Admin Dashboard Template
Pages is a beautifully designed premium Bootstrap 4 Admin Dashboard template that offers multiple layouts and pre-built components, as well as 6 different color schemes.
An article in which we will analyze the Bootstrap 4 grid, which is used to create responsive website layouts.
Grid purposeThe 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 elementsThe Bootstrap 4 grid consists of the following elements:
- Wrapping containers (container and container-fluid);
- Rows (row);
- Adaptive blocks (col).
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.
RowsA 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 that 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 blocksAdaptive 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 indents for adaptive blocks of the Bootstrap 4 framework are set with using 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.
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 Safari browsers There is an error when using such markup; it can be split 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.
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 in the horizontal and vertical directions is done in Bootstrap 4 using utility flex classes.
Vertical alignment of responsive blocksThe 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 blocksThe 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 layoutInternal 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. to adaptive blocks that do not have this row as a parent, CSS properties Removing padding will not apply.
In Bootstrap 4, responsive block offsets can be done using:
- classes offset (by a certain amount of columns);
- service (utility) margin 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 classesIn 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 blocksBy 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 CSS element order properties with a value of -1 (order: -1), and the order-last and order-(breakpoint)-last classes are CSS order properties with a value of 13 (order: $columns + 1).
Let's rewrite the above example using the order classes, which use keywords first and last:
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)
Example adaptive layout on the Boostrap 4 gridLet'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)
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.
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 opportunities, which were not in his 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.
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
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 the 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
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 put some nice words in the header of the page. background picture. 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 header looks a little empty, so let’s add an element to it, assigning it the .overlay class, which will lead to the creation of a block that is located on top background image hats. 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 moreWe 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
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 moreHere 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 B this section 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:
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
The release of the new version of Bootstrap4 prompted me to write this guide because a new version is significantly different. You will have to spend some time studying it, but it is worth it. This guide is not a complete guide to Bootstrap4, and you will undoubtedly need to take a look at the documentation more than once, but here we will cover the basics of creating a website layout with Bootstrap4 in two different ways
Installation In our case we will be using SASS and therefore will use the full installation.If you just need Bootstrap for rapid prototyping, it makes sense to use the CDN method. You simply connect files that are located on other resources on the Internet, without installation (downloading). This way you add them to your project as links.
You can simply add the code from the example below to your project file - index.html
Bootstrap 4 Starter Template Hello< /h1>
This code is straight from the Bootstrap 4 bootstrap page.
With this template you can start using Bootstrap right away. The advantage is that it's easy to get started, but the disadvantage is that you miss out on the customization that Sass offers.
Installing Bootstrap 4 via NPM We are going to start our project right here at this point. This will require using Node.js and its package manager to install the boot device itself along with several other packages. This will give us access to Sass, real-time reloading, etc.First, make sure you have Nodejs installed by opening the console or command line:
If you get the current version, then everything is fine and you can continue, but if not, then download the appropriate installer based on your OS and follow the installation procedure with default settings.
You can read some useful configuration information in my post - NPM Configuring Gulp and SASS Compilation
Once the installation is complete, restart your console or command line and you will have access to Node.js commands.
Let's create a folder for our project and go into it:
Mkdir bs4 && cd bs4
We'll then run npm init to create a package.json file that simply stores our dependencies.
(Note: The -y flag simply allows us to skip responses to various requests and instead provides them with default values)
We'll then use npm again to install several different packages depending on our development dependencies:
Npm install gulp browser-sync gulp-sass --save-dev
We'll then use npm one last time to install a few packages as regular project dependencies:
Npm install bootstrap jquery popper.js --save
Now, it's time to open our project in the code editor. I will use Sublime 3.
We must create a src folder for our project and several subfolders within it. The tree looks like this:
/src /assets /css /js /scss
Inside /src also create 4 folders as shown above.
Then create an index.html file inside /src/ with the following content:
Bootstrap 4 Layout< /title> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> < /head> < body> < /body> < /html>
I'm importing the Raleway font along with FontAwesome for the icons. Then I reference the bootstrap.css and styles.css file. They don't exist yet, but we will create them soon.
Let's also create a styles.scss file inside the /src/scss/ folder. We're going to introduce a quick variable and a set of rules to make sure Sass compilation works:
$bg-color:red; body ( background: $bg-color; )
In the root folder (project folder), create a gulpfile.js file and paste the following contents:
Var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); // Compile sass into CSS & auto-inject into browsers gulp.task("sass", function() ( return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss "]).pipe(sass()) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); )); // Move the javascript files into our /src/js folder gulp.task("js", function() ( return gulp.src(["node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/ jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js"]) .pipe(gulp.dest("src/js")) .pipe(browserSync.stream ()); )); // Static Server + watching scss/html files gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "./src" )); gulp.watch(["node_modules /bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload ); )); gulp.task("default", ["js","serve"]);
I'll describe what's going on here based on the tasks defined above:
Let's run gulp on the command line:
It works like this:
- You use m for margin or p for padding
- After m or p you add either: t (top -), b (bottom), l (left), r (right), x (left and right), y (top and bottom) or nothing for all 4 sides.
- After the hyphen, you specify sizes from 0 to 5 (5 being the largest number of spaces).
So in our example it looks like we need to use margin And bottom to push away the cards underneath.
On the first card container add mb-4:
Now fixed:
Here's how you can easily handle both margins and padding in Bootstrap 4.
Let's play a little bit using different Bootstrap 4 components.
Working with "Typography" in Bootstrap 4 Let's add a section below our 3 columns at the end of the closing for the row class, which will have 2 columns.The first column will use the majority of the columns (8), and the right column will be for vertical navigation in the section after that.
An important heading
A sort of important subheading can go here, which is larger and gray.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
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.
..vertical navigation shortly..Bootstrap 4 has a Typography section in its Documentation that will give you all the type-based helper classes. It's pretty simple. We use .lead to highlight the subtitle below our element h3.
It also has a Text Utilities section in its Documentation that gives you options for text alignment, conversion, italics, and font weights.
In small viewports, let's say we want our type to be centered rather than the default, which is left-aligned.
This will cause the text contained in the div to be centered on small viewports and left aligned on medium and larger ones.
Bootstrap 4 Vertical Navigation We'll add one more element before we get into the customization. In our right column that we just added, let's add vertical navigation:Secondary Menu
The result in the browser should look like this:
You can also test it on small viewports and notice that it is responsive. There are, of course, many more options related to navigation.
Customization in Bootstrap 4 Now we have a fairly standard layout that you can find on most websites.Luckily, Bootstrap 4 has a solid system that makes it easy to customize simple elements.
Open the file /src/scss/styles.scss and paste the following:
// Variable Overrides // Bootstrap Sass Imports @import "node_modules/bootstrap/scss/bootstrap";
According to the Theming section, you can choose to either include all Bootstrap 4 sass files or add individual elements depending on your needs. To keep things simple, we'll just import everything as above.
Changing Theme Colors in Bootstrap 4 Perhaps the most common problem is changing colors.If you open the node_modules/bootstrap/scss/_variables.scss file, you will notice that at the top it mentions a color system. In this section you will see all the variables that you can rewrite to match the colors.
Let's change just the base color, change styles.scss to the following:
// Variable Overrides $theme-colors: ("primary": #d95700);
Save it and this is the result:
Very simple!
Let's also change the background color:
// Variable Overrides $theme-colors: ("primary": #d95700); $body-bg: #ededed;
Now the result looks like this:
Hmm, now our jumbletron (hero) section looks ugly since it was also gray.
We can set custom settings for certain elements by using the inspector in chrome or firefox, find the associated element classes we want to change, and change them in our styles.scss file.
In this case, the class responsible for the jumbotron is .jumbotron. Let's change the background color and add a small border to the top to simulate the dropshadow from the navbar:
// Variable Overrides $theme-colors: ("primary": #d95700); $body-bg: #ededed; .jumbotron ( background-color: #ffffff !important; border-top: 3px solid rgb(219, 219, 219); )
Now the result:
In this lesson we will learn how to download and connect the Bootstrap framework (version 3 or 4) to the site.
Bootstrap Learning ToolkitMinimum 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 or others).
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.1The second link contains the framework in source codes. This version is more convenient for website development, because... makes it very easy to change styles, color scheme components, configure them, etc. But these source files, before being used on the page, will need to be compiled and minified. This process usually automated, for example, using Gulp.
Bootstrap 3.4.1 source codes Bootstrap 4.3.1 source codes Unpacking the Bootstrap archiveAfter 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.ttf └ ── 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 provide more fast loading 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 pageThe installation process of the Bootstrap 3 framework consists of connecting the following files to the HTML 5 page:
Note: JavaScript files It is better to include it before the closing body() tag, as this will ensure faster loading and display of the main content of the web page.
...
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")); ));
Loading...
