Exit new version Bootstrap4 prompted me to write this tutorial because the 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:
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 new 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 free Landing template Page built with Bootstrap 4 and PaperKit 2. It is suitable for creating websites and landing pages for mobile applications and 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 website template with a clean source code, 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.
Hello everyone, friends! In mid-2013, Bootstrap 3 was released, which over the past years has proven itself to be a convenient, extensible CSS framework for quick creation adaptive layouts. Millions of sites successfully use this framework and we are already quite accustomed to it.
Cool
Stammer
Happened on January 18, 2018 an important event- the long-awaited version of Bootstrap 4 has left beta, based on the use of the Flexbox model for markup, which currently already has support for all modern browsers and is more convenient and flexible for developers than the classic markup model based on Float. Now we can say with complete confidence that it is not possible, but MUST be typewritten using Flex!
Additional Bootstrap 4 Lesson MaterialsToday we will take a closer look at working with the Bootstrap 4 grid, comparing it with old version. This lesson will be useful to you not only if you are a beginner and are getting acquainted with Bootstrap, but also if you are an experienced developer and want to learn all the rules and nuances of layout using the Bootstrap 4 grid and Flexbox tools included in it.
1. Basic default grid parametersThe default grid of Bootstrap 4 is very similar to the 3rd version, but there are some important differences.
From the table of main options, we can notice obvious differences from the third version grid. The class prefix “.col-xs-”, which is responsible for the smallest resolutions, is now removed, replaced by a simplified prefix “.col-”. You might mistakenly think that the ".col-" prefix is responsible for minimum permissions mobile devices, However, this is not quite true. Among other things, the “.col-” prefix is one of the most important innovations in Bootstrap 4. This is a class that is responsible for automatically laying out columns at any resolution. But more on that later.
For small resolutions, the prefix “.col-sm-” with a media query of 576 pixels is responsible. The container width is 540 px. Medium resolutions start from 768 pixels. Container width - 720 px. Higher resolutions work with device resolutions of 992 pixels or more. Container width - 960 px. And the largest ones - from 1200 pixels. The container width is fixed at 1140 px.
Please note that media query maximum values have imprecise values with fractional part".98" in pixels. This is noticeable when choosing the Desktop First layout method, where the maximum media query width is limited. For example, when compiling Sass “+media-breakpoint-down(lg)” we will get “@media (max-width: 1199.98px)”. Here 0.02 pixels are freed up to start the next media query. Keep this in mind. In the next issues of "Jedi Layout 8" we will look at this and many other points from this lesson using a real example.
2. Automatic column layout 2.1 Columns of the same widthUsing the new generic class ".col", you can specify up to 12 columns in a row (parent of ".row"), the width of which will be automatically calculated depending on the number of elements and will be equal.
For example:
2.2 Setting the width of one column You can also explicitly set the width of one column and leave the rest automatic.
1 of 3 2 of 3 (wide) 3 of 3 1 of 3 2 of 3 (wide) 3 of 3 
In this example, the second element in the third row has the class ".col-6" and the second element in the second row has the class ".col-5", which occupy the corresponding number of columns on all screen resolutions. The width of the remaining columns is responsive and is calculated automatically, taking up all the remaining space.
2.3 Variable width contentYou can use the "col-(breakpoint)-auto" class to define content with a variable width, depending on the space occupied by the column content. Where breakpoint is the screen size (xl, lg, md or sm).
1 of 3 Variable Width Content 3 of 3 1 of 3 Variable Width Content Number Two 3 of 3 
Here we see that the two central columns occupy a width corresponding to the width of the content, but in the first row, thanks to the ".justify-content-sm-center" class of ".row", the entire row is centered and the total width depends only on the width of the central column, in while the second row is stretched to the full available width, but the second column remains fixed to the width of the content.
2.4 Multi-rowThanks to Bootstrap 4, you can create multiple lines (hyphens) in one row. This can be implemented using the “.w-100” class, which is very similar to the “br” tag and essentially just wraps columns on a new line.
col col col col col 
A very interesting feature of Bootstrap 4 is the ability to set universal columns that will be displayed at all resolutions. This is the ".col" class mentioned earlier. In addition, you can define a class that indicates the specific number of columns that the content will occupy - these are classes with the prefix “.col-(number of columns)”, for example “.col-6” tells us that the content will occupy 6 columns out of 12. In case when it is not necessary to specify a specific quantity, you can safely use universal class".col".
col col col col col-8 col-4 
You can use the class prefix ".col-sm-(number of columns occupied)" to define the base grid at all but the smallest resolutions. On small screens, the columns of such a grid will stack under each other. On permissions more - they will take up as much space as you defined in the classes.
col-sm-8 col-sm-4 col-sm col-sm col-sm 
Here we see that the first row on devices with a resolution of more than “sm”, that is, more than 576 pixels. is divided into 2 columns - 8 and 4 out of 12 wide, respectively. The width of the columns in the second row is calculated automatically, but at the smallest resolutions these columns also stack under each other, thanks to the “.col-sm” class.
3.3 Creating a complex combined meshWith Bootstrap you can create any combination of columns when creating a grid. For each column, you can set any behavior at different resolutions using adaptive classes. Here the differences from the third version are only in the names of the classes.
.col-12 .col-md-8 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-6 
Bootstrap 4 is based on “flex” and gives us all the capabilities of this model, which are available in simple ready-made classes. Possibilities include vertical and horizontal alignment.
4.1 Vertical alignment Top Top Top Middle Middle Middle Bottom Bottom Bottom
In addition to controlling alignment through the parent “.row”, you can align columns by giving them the appropriate classes:
Top Middle Bottom 
In addition, Bootstrap 4 has tools for horizontal alignment of columns using the “.justify-content-” prefix on “.row”.
row justify-content-start row justify-content-start row justify-content-center row justify-content-center justify-content-end justify-content-end justify-content-around justify-content-around justify-content-between justify -content-between 
Very often there are situations when it is necessary to remove margins between columns. For example, if you are creating a gallery and the elements need to be placed close together, like this:
To do this, just set the additional class “.no-gutters” to the “.row” element.
col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md -4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col -md-4 col-6 col-sm-4 col-md-4 
If a row (.row) is filled with a total number of columns of more than 12, the next column is moved to a new line.
.col-9 .col-4
9 + 4 = 13 columns - that's more than 12. This item 4 columns wide will be moved to a new line. .col-6
The following columns will be located along the line. 
You can use special classes with the ".order-" prefix to define the order of elements. If you are familiar with Flex-layout, these rules will be familiar to you. Bootstrap 4 gives you the ability to set the order of elements using classes. You can set the order directly (.order-1.order-md-2):
First unordered element 
Or you can use special classes that define the order of the first and last elements(.order-first, .order-last):
First unordered Second, ordered as last Third, ordered as first
5.2 Column offsetBy analogy with Bootstrap 3, version 4 also has the ability to horizontally offset columns, but this is implemented somewhat differently and there are special classes for this with the prefix “.offset-”.
5.2.1 Displacement classesYou can shift a column to the right using the “.offset-md-*” classes, which increase the left indent by * the number of elements. From the example below, the class ".offset-md-2" will shift the column ".col-md-4" 2 columns to the right, the rest of the examples work in the same way:
.col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset -md-3 
It is quite expected that Bootstrap 4 supports nesting of elements. Everything works here the same as in the third version - to nest columns within others, you need to create a child class “.row” and nest columns in it.
Level 1: ".col-sm-9" Level 2: ".col-8 .col-sm-6" Level 2: ".col-4 .col-sm-6" 
We looked at the main features of working with the Bootstrap 4 grid. If you want to become more familiar with all the capabilities of the framework, I recommend studying the documentation on the official website.
In the next lesson, we will look at setting up the Bootstrap grid for your specific project using the example of using OptimizedHTML 4 in the starter template. Namely, setting up, working with variables of indents, breakpoints, number of columns and other things.
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 features that it didn't have. 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 seen 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 to parent element section class.row:
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
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 filesDownload everything: Sass sources, JavaScript, and documentation files. Requires Sass compiler Autoprefixer, postcss-flexbugs-fixes and some installations.
Package ManagersPull 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!
npmInstall 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 /js/*.js files top level package directory.
Bootstrap package.json contains some additional metadata in the following sections:
- sass - path to Bootstrap main source Sass file
- style - path to Bootstrap uncompressed CSS that has been pre-compiled using default options (no customization)
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.alpha3See gem README for more information.
Meteor $ meteor add twbs:bootstrap@= 4.0.0-alpha.4 ComposerYou can also install and manage Bootstrap Sass and JavaScript via
Loading...
