Adaptive layout using bootstrap. Fast floats and wrap cancellation

Useful tips

Advantage using CSS frameworks is that the layout designer does not need to think about many of the layout nuances that the creators of the frameworks have already thought through for him. Such nuances include cross-browser compatibility, support for different screen resolutions and much more. The layout designer only indicates what, how and when to show, the rest is done by the framework itself. This approach can greatly speed up website layout. The advantages of Bootstrap include its popularity. This means that it will be easier for another code designer to maintain your code.

The disadvantage of using frameworks is that the page will have to carry the entire framework's extra styles, even if it only uses a small part of them. The framework is an excellent tool for prototyping and creating pages for which design is secondary, such as admin pages. If you have a very specific design, then laying it out using a framework may be more difficult than using native tools. However, this is also possible.

About using Bootstrap Currently, there are several ways to work with Bootstrap styles. Without using LESS For beginners, Bootstrap itself recommends the following approach: you need to download compiled Bootstrap from the site and put it in your project without changing anything. Then you need to create your own empty CSS file and include it after bootstrap.css.

After that, in order to change the Bootstrap styles you need to change them in your styles.css something like this:

A ( color: #beceda; )
An obvious disadvantage this approach is that you will have to manually search for the necessary styles that you want to interrupt and this will not always be trivial, because Some Bootstrap options apply to many selectors in modified form, such as through formulas. The Customize tool can be of some help here; it will help compile your changes correctly, but only once. If in the future you want to change some parameter, you will have to re-enter the changed values for all fields in order to compile your styles.

Using LESS This method assumes that all Bootstrap variables are stored in .less files. The developer works with these variables and, if necessary, manually or automatically compiles them into CSS files, and the HTML itself includes only the compiled CSS files. It is this option that will be considered in the article as the most flexible.

There are a large number of ways to compile LESS files and Bootstrap leaves this up to the discretion of the developer. Bootstrap itself uses Grunt for compilation, you may prefer a plugin for JetBrains products, and we, since the article is aimed at beginners, will look towards more simple solutions. Such solutions are WinLess for Windows, SimpLESS for Mac or Koala for Linux. All these programs do approximately the same thing: they receive a folder with LESS files as input and listen for changes in them. As soon as you make changes to any file, it is immediately compiled into the specified CSS file. This way you don't need to run manual compilation after every change. You change the LESS file, save it and immediately see the changes on the site in an already compiled, compressed form.

Creating a project First step, let's create simple structure files for our project.

Preliminary inspection After creating the file structure, open psd file in Photoshop. It is important to carefully examine the template and evaluate it. We need to understand the following things:

How will the images be cut?
What components will be used?
What will be the main styles?
What page layout will we get?

Only after you mentally answer these questions for yourself, you can move on to layout. Let's look at these questions in order. General images On at this stage you need to cut and save only general images that will be on all pages of the site and do not relate to the content. In our case, this will be a light gray page background, a header background, a map image, two logos and buttons social networks.

Save the map image:

Let's save the logos as follows:

Images/logo.png
images/footer-logo.png

Repetitive background images it is necessary to cut out a minimum piece sufficient to form a complete image, repeating vertically and horizontally.

/images/bg.png
/images/h1-bg.png

It is convenient to save social network icons with the same sizes into one file and use them as sprites for faster loading. More details about gluing images are described in the first part. The result will be two files:

/images/social.png
/images/social-small.png

Components The main difference between layout using Bootstrap and layout using native means is that Bootstrap introduces the concept of components. Components are frequently used ready-made HTML blocks with predefined styles. Sometimes components use JavaScript. The layout designer can use either a ready-made component or define his own appearance for it. To do this, you often just need to change the value of variables in Bootstrap. If more flexible changes are needed, the layout designer can always change the HTML and CSS at his discretion.

If you take a look at our template, you can see that we will need the following components:

For layout with columns - grid system (row, col)

For search – inline form (form-inline), grouped controls (input-group), button (btn)

For navigation - navigation bar(navbar) and the navigation itself (nav)

To display submenus – grouped list (list-group)

For the map block – visual panel (panel)

To display a large central block - jumbotron

To display photo frames - thumbnails

We will look at each component in more detail when we encounter it in the layout. Basic styles In Bootstrap, all default styles are already set, we only need to customize them if they differ from our design. Let's do this in the file src/less/variables.css.

First of all, you need to add variables that are not in the Bootstrap settings so that you can use them in the future. For us this is only a specific design font.

@brand-font: "Oswald",sans-serif;
If you want to use a template for Russian sites, then you can try replacing the Oswald font with the closest Cuprum, which supports Cyrillic.

Now let’s replace the Bootstrap settings with our own:

Now that we're done with the variables, let's start styling our design in the styles.less file. First, let's connect Bootstrap itself and our variables:

@import "bootstrap/bootstrap.less"; @import "variables.less";
Not all Bootstrap's default styles can be changed using variables, so let's do it manually:

P ( margin: 20px 0; ) .form-control ( box-shadow: none; ) .btn ( font-family: @brand-font; )
Here we removed the shadow from the form elements, and specified the specific page font for the text in the buttons.

Then we describe the page background and the top bar:

Body ( border-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); )
Further in the text it will not be indicated in which file the styles are written. Just remember that we save all the variables in the file variables.less, and the CSS styles will be stored in styles.less.

HTML framework We traditionally start the website layout with an HTML framework. We paste the code of the simplest template from the Getting started page into the index.html file, having previously removed all unnecessary things:

Whitesquare
This block creates an HTML5 document structure. In the title we indicate the name of our page – Whitesquare. With the viewport meta tag we indicate that the page width on mobile devices will be equal to the screen width and the initial scale will be 100%. Then the styles file is included. And for Internet versions Explorer less than nine we connect scripts that allow us to display our layout correctly.

Layout B in this case, we see that the site consists of two parts: the main container with content, which is centered on the screen, and a stretching footer. The main container consists of two columns: main content and sidebar. Above them is the header, navigation (nav) and page title (.heading).

Let's add the following code to body:

Here we come across the first Bootstrap component - columns. The parent element of the columns is given the class "row", and the column classes start with the prefix "col-", then the screen size (xs, sm, md, lg), and end with the relative width of the column.

A column can be assigned simultaneously different classes with values for screens, for example class="col-xs-12 col-md-8". These classes simply set the column width as a percentage for certain size screen. If the column is not given a specific screen class, then the class for the minimum specific screen will be applied, and if it is not specified, then no width will be applied and the block will take up the maximum possible width.

Our classes “col-md-7” and “col-md-17” indicate that the blocks are columns with a width of 7 and 17 relative to the parent container. By default, the sum of column widths in Bootstrap is 12, but we doubled this number to achieve the flexibility we needed.

Body ( … .wrapper ( padding: 0 0 50px 0; ) header ( padding: 20px 0; ) )
We placed this structure inside the body. The LESS syntax allows you to nest rules within each other, which are then compiled into the following constructs:

Body .wrapper (…) body header (…)
This approach allows you to see the HTML structure right inside the CSS and gives some “scope” to the rules.

Logo

Insert the logo into the header tag:

No additional styles required.

In order to create a search, we need the following Bootstrap components: inline form, grouped controls and button.
In the header tag we create an inline form, aligned to the right. The fields of such a form must have a “form-control” class and a label.

We place the “grouped controls” component into the form. Grouping controls allows you to remove the space between the text input and the button and, as it were, merge them into a single element.
It is a div with the “input-group” class and fields, and the button of such a component is placed in a block with the “input-group-btn” class.

Since we don’t need to show the label for the search field, we’ll hide it with the “sr-only” class. This is needed for dedicated screen readers.

The “btn-primary” class is added to the button, meaning that this is the primary button of this form.

…Search GO
All we have left is to set the width of the search form in the styles.

Body ( … .wrapper ( … header ( … .form-search ( width: 200px; ) ) ) )

To display the menu, take the “navigation panel” component and place in it the “navigation” component, which is a list with links. For navigation, a class "navbar-nav" is added, which applies special navigation styles within the navbar.

In order to bring this menu to our design, we will set the following values for the variables:

/*navbar height*/ @navbar-height: 37px; /*set more horizontal padding*/ @nav-link-padding: 10px 30px; /*background for menu items*/ @navbar-default-bg: @panel-bg; /*text color in menu items*/ @navbar-default-link-color: #b2b2b2; /*and when hovering the mouse - the same*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*background of the active menu item is our specific blue color*/ @navbar-default-link-active-bg: @brand-primary; /*text color of the active menu item*/ @navbar-default-link-active-color: #fff;
In addition to customizable parameters, we will describe additional ones in styles - this is uppercase text and our specific font:

Body ( … .wrapper ( … .navbar a ( text-transform: uppercase; font: 14px @brand-font; ) ) )

Page title

The page title is placed in a div with the "heading" class.

About us
And has the following styles:

Body ( … .wrapper ( … .heading ( height: 40px; background: transparent url(../images/h1-bg.png); margin: 30px 0; padding-left: 20px; h1 ( display: inline-block; color: #7e7e7e; font: normal 40px/40px "Oswald", sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; ) ) ) )
Here we draw a gray stripe as the background on the div, and insert an inline h1 into it with the desired font and page color background to create the impression of a transparent background for the h1.

Submenu

When creating a submenu, we will not use the “navigation” component, since it is not very suitable for us in style; the “grouped list” component is much more suitable for us. Each element of such a component has a class “list-group-item”.

The submenu should be placed in the aside tag. We create a list of links in the same way as the main menu.

In the component settings, we indicate that all grouped lists should be shown with the background and frame of the “panel” component:

@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
And apply the following styles to the submenu:

Body ( … .wrapper ( … .submenu ( margin-bottom: 30px; li ( display: list-item; font: 300 14px @brand-font; list-style-position: inside; list-style-type: square; padding : 10px; text-transform: uppercase; &.active ( color: @brand-primary; ) a ( color: @text-color; text-decoration: none; &:hover ( color: @text-color; ) ) ) ) )
First, we return the standard styles to the list elements, since Bootstrap replaced them with its own. Add a padding at the bottom. Submenus use thinner fonts and square markers. And for links we set colors, upper case and remove underlining. The ampersand in the “&.active” code in LESS syntax will be replaced at compile time by parent selector: ".submenu li.active".

Sidebar content In addition to the submenu, the sidebar content also contains an image with the location of the offices.

To display it, we will use the “panel” component, or rather its variation “panel-primary” for coloring the title. This component contains a header block (panel-heading) and a panel content block (panel-body). We add the “img-responsive” class to the map image, which will allow the image to shrink when the screen width is small.

… Our offices
In Bootstrap variables we have already set the color for the background of the panel (panel-bg), and now we will indicate that the “primary” panel will have the default panel’s gray border, rather than the default blue one:

@panel-primary-border: @panel-inner-border;
Now you need to change the site styles standard settings panels that are not changed through variables:

Panel ( box-shadow: none; .panel-heading ( font: 14px @brand-font; text-transform: uppercase; padding: 10px; ) .panel-body ( padding: 10px; ) )
Here we removed the shadow from the panels, added our own indents and set our own heading font.

Quote Let's start laying out the content by adding a quote.

This page element is most similar to the Jumbotron component. Let's add it to the content column:

“Quisque in enim velit, at dignissim est.” nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”

John Doe, Lorem Ipsum
Using variables for the jumbotron component, we will set the text color to white and the branded blue background:

@jumbotron-bg: @brand-primary; @jumbotron-color: #fff;
And let's describe our styles:

Body ( … .wrapper ( … .jumbotron ( border-radius: 0; padding: 0; margin: 0; blockquote ( border-left: none; p ( font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bottom: 0; ) small ( text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:before ( content: ""; ) ) ) ) )
In them, we remove the corner rounding, component padding, and quote decorations that are set by Bootstrap by default. We will also add styles for our fonts.

Content

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

The next step is to add two images that are at the end of the content text. This is done using two columns:

The "thumbnail" class turns images into a "thumbnail" component. He will do all the work of stylizing the images for us. The only thing left for us is to set our padding and border color in the variables for this component:

@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;

Block "Our team"

When laying out this block, let's first add a title:

Our team
with style:

Body ( … .wrapper ( … h2 ( background: none repeat scroll 0 0 #29C5E6; color: #fff; font: 300 30px @brand-font; padding: 0 10px; text-transform: uppercase; ) ) )
And then we’ll add a block with the “team” class, which consists of two lines containing employee cards. Each card is a column. The card has a width equal to four columns of our grid. All cards except the first one in the line have a left indent, which is created by the “col-md-offset-1” class. The card content consists of an image and a description (.caption)

John Doe Saundra Pittsley

team leader

…

Ericka Nobriga

art director

Cody Rousselle

senior ui designer

…
After creating the markup, let's give these elements the following styles:

Body ( … .wrapper ( … .team ( .row ( margin-top: 20px; .col ( white-space: nowrap; .thumbnail ( margin-bottom: 5px; ) ) .col-md-offset-1 ( margin- left: 3.7%; ) .caption ( h3 ( font: 300 16px @brand-font; margin: 0; ) p ( font: 300 14px @brand-font; color: @brand-primary; margin: 0; ) ) ) ) )
In addition to the indents and font styles that are set here, we changed the “col-md-offset-1” class. He had to set the indent to 3.7% because... the standard indentation was too large.

Footer The footer consists of four large blocks: Twitter feed, site map, social links and logo with copyright.

First, let's create a footer container with these blocks:

And apply the design to it:

Footer ( background: #7e7e7e; color: #dbdbdb; font-size: 11px; .container ( height: 110px; padding: 10px 0; ) )
The footer tag defines a gray area across the entire width of the screen, and the container inside it displays a centered area on larger screens and specifies the height and padding of the footer. We use columns to align blocks inside the footer.

Twitter feed Layout the contents of the Twitter feed:

Twitter feed Oct 23

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug

Styles:

Body ( ... footer ( ... .container ( ... h3 ( border-bottom: 1px solid #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand-font; margin: 0 0 10px; text-transform: uppercase; ) p ( margin: 5px 0; ) .twitter ( p ( padding-right: 15px; ) time a ( color: #b4aeae; text-decoration: underline; ) ) ) )
For all footer headings, we set fonts and indents, and also create an underline through the bottom frame. For paragraphs, indicate the indentation. For the link displaying the date, set the color and underline.

Sitemap The sitemap consists of two equal columns with links:

Sitemap Home About Services Partners Support Contact
We set the links to color, font and space between them.

Body ( ... footer ( ... .container ( ... a ( color: #dbdbdb; ) .sitemap a ( display: block; font-size: 12px; margin-bottom: 5px; ) ) ) )

Social links

We insert a set of links into a block with the “social” class.

Social networks
And let's style them:

Body ( … footer ( … .container ( … .social ( .social-icon ( width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin -right: 10px; ) .social-icon-small ( width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; ) .twitter ( background-position: 0 0; ) .facebook ( background-position: -30px 0; ) .google-plus ( background-position: -60px 0; ) .vimeo ( background-position: 0 0 ; ) .youtube ( background-position: -16px 0; ) .flickr ( background-position: -32px 0; ) .instagram ( background-position: -48px 0; ) .rss ( background-position: -64px 0; ) ) ) ) )
Here we used the sprite technique - when one image file is used for different pictures. All links are divided into large icons (.social-icon) and small ones (.social-icon-small). We set these classes to display as an inline block with fixed dimensions and the same background. And then using CSS we moved this background so that the corresponding image was displayed on each link.

Styles are done similarly to the previous blocks, with the only difference being that the block is nailed to the right edge and the alignment inside it is also to the right:

Body ( … .footer ( … .container ( … .footer-logo ( float: right; margin-top: 20px; font-size: 10px; text-align: right; a ( text-decoration: underline; ) ) ) ) )

This completes the layout. Ready project can be downloaded

From the author: I salute you. In previous articles, we looked at the connection and components of the Bootstrap framework, as well as its grid. It's time to summarize our knowledge and create some simple website. Accordingly, today you will see what it looks like on Bootstrap layout site, albeit schematically, and not from a PSD layout. But first, let’s repeat once again how layout on bootstrap differs from standard layout using CSS.

Layout using a framework: advantages

Bootstrap, like any other framework, greatly simplifies the process of designing web pages. This is a CSS and JS framework, that is, it has both ready-made styles and web scripts. These ready-made components speed up layout by 3-10 times, because you just need to practically write the necessary classes and data attributes to activate these styles and scripts.

The most important advantage is, undoubtedly, the adaptive grid built into the framework. You won't have to worry about what size to set the blocks or how to make them shrink or disappear from the screen when the window width changes. Of course, for an experienced layout designer, all this does not seem like a problem, but you must agree that even if you know how to solve a problem, this does not mean that you can do it quickly.

For example, when using media queries, you may need to take into account a bunch of nuances so that your site does not float. With bootstrap, the layout will initially be very neat, because you won’t touch the CSS at all, and if you do, it will only be to change the appearance of the elements, which won’t break the site in any way.

The second, very important advantage is open source Bootstrap. You will fully understand how important this advantage is after you create your first websites using the framework.

By default, you download the full version of the framework - the bootstrap.css, bootstrap.js files, as well as the icon font. But no one is stopping you from choosing which framework components to include in your own build and which not. You can even disable all components altogether and leave, for example, only the grid, tabs and carousel. And then you significantly reduce the size of the files and connect to the project only what will be used on it.

This is a professional approach to using bootstrap. In fact, you simply may not need most of the CSS styles described in it. For example, for buttons, tables, pictures, etc. you can describe some styles yourself. Essentially, the real value in the Bootstrap framework is the grid, as well as some javascript components.

How to create a simple sketchy website using bootstrap

In fact, you can create templates in just a couple of minutes once you get good practice working with the framework. Let's create a typical simple two-column layout that will have a header, content block, sidebar, and footer.

First, you need to decide whether the site container will have fixed dimensions or will be completely rubber. If you assign the container class to the general container, its maximum width will be limited to 1170 pixels. If you specify container-fluid, nothing will limit the width of the site. For example, on monitors with a width of 1920 pixels, its width will be the same - 100% of the window.

Accordingly, you must decide this point for yourself at the site design stage in order to understand whether at least some kind of binding to pixels is needed or not.

Great, our template will have three rows - header, content + sidebar and footer. In general, this is the standard look for simple two-column sites. Let's look at the markup:

A cap

< div class = "container-fluid" >

< div class = "row" >

< div class = "col-md-12" >

< h1 >A cap< / h1 >

< / div >

In principle, the hat does not even have to be placed in the grid, but for the sake of order we will still do it. We will not insert any logos or menus into it, since we have a purely schematic template. Next comes the sidebar and content. Accordingly, this is a new series.

Let's place the block with content higher in the layout so that when collapsing blocks on mobile devices, it will be higher than the side column. We will place the sidebar immediately after the content. You may not have to change anything if the design puts the sidebar on the right. However, sometimes it needs to be placed to the left, and this is where the additional push and pull classes come to the rescue, which allow you to move the columns in a row from right to left, changing their position.

General formula to move the sidebar to the left is simple: move the sidebar itself to the left by the width of the content, and the content to the right by the width of the sidebar. But first you need to naturally decide what this width will be. Let our main block occupy 75% of the width, and the side column 25%. Then we need this code:

< div class = "col-md-9 col-md-push-3" > < / div >

< div class = "col-md-3 col-md-pull-9" > < / div >

Naturally, put it in one row.

Creating a sidebar

In the side column we will place vertical menu. To do this, you can look in the documentation to see what classes there are for styling lists. Click on “components” – “list groups”.

Sidebar

Car showrooms 19
Auto repair shops 178
Repair
ads

< div class = "col-md-3 col-md-pull-9" >

< h2 >Sidebar< / h2 >

< ul class = "list-group" >

< li class = "list-group-item" >Car showrooms

< span class = "badge" > 19 < / span >

< / li >

< li class = "list-group-item" >Auto repair shops

< span class = "badge" > 178 < / span >

< / li >

< li class = "list-group-item" >Repair

< / li >

< li class = "list-group-item" >ads

< / li >

< / ul >

< / div >

This is what the menu looks like, with icons:

Of course, it can be made much more beautiful, but we are just making a template for an example. Yes, and I got the menu without links, but there’s still nothing to link to, so let’s skip this point.

Let's finish with the sidebar. Of course, on a real site there could be a lot of other things in it. For example, advertising banners. Now we will work with the content block and there I will show you how to work with images in Bootstrap, so that you can insert banners into the sidebar without any problems.

Creating a content block

The content, as we remember, in our case should be higher in the markup, so paste the following code above the sidebar. Both of these blocks are placed in one row. This is the code I have inserted into my content so far:

Content Header

Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdhfdhfdhfd hdfhfdh fdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd

< div class = "col-md-9 col-md-push-3" >

< h2 >Content< / h2 >

< div class = "row" >

< div class = "col-sm-4" >

< div class = "panel" >

< h4 >Header< / h4 >

< img src = "auto1.jpg" class = "img-responsive" >

< p >Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdhfdhfdhfd hdfhfdh fdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd< / p >

< / div >

As you can see, we're using a nested grid system here. As planned, there should be 3 article announcements in the content in a row. To easily achieve this, we will take the col-md-9 col-md-push-3 block, that is, the content block, to be the container for the grid. In this case, we create a row in it, where, in turn, the 12-column grid again becomes available to us. With class col-sm-4 we give one article announcement a width of exactly 33.33%. Thus, 3 announcements will ideally fit into one line of content. Just copy and paste this block 2 more times to check how they appear.

This is how our blocks with article announcements are displayed:

Perfectly straight. Without any questions at all. Announcements will be placed in 3 columns on all devices except the smallest ones, where everything will be in one column.

I hope this example is clear to you. Now I propose to look at a slightly more non-standard example. Let's create another row in the content. This time the idea is to display one article and a slider in a row, with a small indent between them. Let's say the article is on the left and the slider is on the right. There is a small gap between them + all this, of course, should be adaptive.

You can simply copy and paste the article announcement code into our new row. All we have to do is make a slider. Actually, I will not give its code here, because it is very cumbersome. Go to the official Bootstrap website or the Russian version, go to the Javascript section and look for Carousel there.

Review the example provided in the documentation. You have to figure it out, there is nothing complicated there. In fact, in order for the slider to start working, you just need to take your images and enter the path to them in src attributes for image tags.

The point is not how to make the slider itself - this information can be easily found in the documentation. Our task now is to understand what size block the slider needs to be wrapped in. We have 8 more free cells in the row, but since there should be a small indent between the article announcement and the slider, I will wrap the slider in this block:

Now we have an article announcement and a slider in one line, and below there are 3 more announcements, and all this is located in the content block.

So, well, I probably won’t create a footer at all, because you yourself can now understand how to create it. On the same principle as the hat. We are not particularly interested in these elements today because we were working with the side column and especially the main block.

If you repeated everything after me, only using your own images, you will be forced to admit that we have a fairly smooth layout (if you don’t take into account the terrible appearance of the blocks, but we don’t have time to correct them now). I’ll try to “photograph” the entire site:

There are no horizontal scrolls, the site is easy to view on any screen resolution, nothing slides, nothing falls out, etc.

Of course, if we had done the layout not schematically, but from a PSD layout, it would have turned out much more beautiful, but at least the layout does not fall apart and the template is completely adaptive, and we spent very little time on its creation. Just imagine how much CSS code you would have to write to create styles for the slider and align blocks on one line, place indents, etc. Of course, an experienced layout designer will do all this quickly enough, but even his less experienced colleague will be able to do it faster using Bootstrap.

Are you ready?

Well, we looked at what layout looks like on Bootstrap 3. Now tell me one simple thing? Do you want to learn the Bootstrap framework in the next 5-10 days at a professional level and start creating responsive templates of any level of complexity?

All this talk about Bootstrap that you can’t create a truly original and unique design with it is not true. Why? Well, what’s stopping you from customizing the framework, leaving only the grid and a couple of the most useful components? And you will not be limited in any way in writing styles for any elements on a web page, but at the same time you will not think about how to make it all display well on any screens, because the framework solves this issue for you.

In summary, I invite you to take our first-class training in Bootstrap framework from scratch. Yes, yes, even if you didn’t understand anything from this article. I haven’t seen any other Bootstrap courses on the RuNet, even if they exist, they hardly contain 2 professional-level templates + a landing page as a bonus.

Well, with this I leave you thinking and I hope that you do not miss your chance to master Bootstrap and in the near future completely recoup the price for the course, because with this framework you will be able to make 2-3 times more sites for the same time, which means earning money more money. I think you like this perspective.

Today we made up a schematic layout, which, however, in its structure was far from the simplest. As you can see, Bootstrap has greatly simplified our task. I say goodbye to you and wish you to develop websites as quickly and simply as possible. Oh yes, and adaptive too.

Requires HTML5 doctype

Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. Include it in all your projects.

Design and links

The main components of Bootstrap include display elements, styling, and link styles. In particular, we:

Removed the margin of the body element
Set the background color to white background-color: white; for body
We use the attributes @baseFontFamily , @baseFontSize and @baseLineHeight as the main ones
Set the base color of the link using @linkColor and apply underlining only to the selector:hover

You can find these styles at scaffolding.less.

Resetting settings using Normalize

In Bootstrap 2 we implemented the old browser default reset using Normalize.css, a project from Nicholas Gallagher which also includes HTML5 Boilerplate. Since we often use Normalize in our reset.less , we removed some elements specifically for Bootstrap.

Default Design Grid Demo

The main layout grid consists of 12 columns, providing container widths of 940px without active dynamic features. By adding a dynamic CSS file, the grid can stretch from 724px to 1170px wide, depending on your monitor. On displays that are less than 767px wide, the columns become floating and line up vertically.

Basic HTML Grid

For a simple two-column layout, create a .row class and add the appropriate number of columns.span* . Since this is a 12-column grid, each two-.span* range has 12 columns and will always add 12 columns to each row (or whatever number of columns is specified in the parent element).

...

In this example, we have .span4 and .span8 created and 12 columns and one continuous row.

Moving Columns

Move the columns to the right using classes.offset* . Each class increases the left margin of a column by the size of the column itself. For example, .offset4 moves .span4 four columns.

...

Column layout

To layout content using the default grid, add a new .row class and set a .span* for columns within an existing .span* column. Layout rows must consist of a set of columns, which is added to the number of parent columns.

Level 1 column

Level 2

Level 1 column

Level 2

Floating Mesh Demonstration

A floating grid uses percentages to indicate column widths instead of pixels. A floating grid has the same dynamic capabilities as a fixed grid, providing the desired proportions for screen resolutions of different devices.

Basic floating grid HTML

Makes any row float by changing .row to .row-fluid . The columns will remain the same, making it easy to switch between fixed and floating design patterns.

...

Floating movement

Installed in the same way as in fixed grid: Add class.offset* to any column to move multiple columns.

...

Floating layout

The layout of a floating grid is slightly different: the number of layout columns should not match the number of parent columns. Instead, each level of stacked columns is "reset" because each row takes on 100% of the properties of its parent column.

Level 1 of column

Level 2

Layouts Fixed layout

Basic fixed-width layout (optional dynamic) with only one requirement: .

Floating markup

Create a two-column floating page using . Ideal for applications and documentation.

Adaptive design Enable responsive capabilities

Include in your project responsive css by adding appropriate meta tags and additional style sheets to your document. If you have compiled Bootstrap downloaded from our page, then you just need to add a meta tag.

Attention! By default, Bootstrap does not have responsive capabilities enabled because it is not required everywhere. Instead of developers disabling this functionality every time, it would be more logical to give them the opportunity to enable it when necessary.

About Bootstrap's responsive features

Media queries modify regular CSS based on a wide variety of conditions and relationships, sizes, display types, etc., but most often focus on min-width and max-width .

Changes the width of columns in a grid
Where necessary, aligns elements vertically instead of using wrapping.
Changes the size of headings and text for better display in various devices Oh.

Use the adaptive capabilities of Media Queries only to create mobile version site. For large projects, we recommend creating separate version design and website.

Supported devices

Bootstrap supports multiple media queries in one file, which allows your project to work on different devices and screen resolutions. This includes the following devices:

/* Large desktop */

@media (min - width: 1200px) (...)

/* Portrait tablet to landscape and desktop */

@media (min - width : 768px ) and (max - width : 979px ) ( ... )

/* Landscape phone to portrait tablet */

@media (max - width: 767px) (...)

/* Landscape phones and down */

@media (max - width: 480px) (...)

Additional adaptive classes

The class table shown here provides dynamics for different devices and how they work in conjunction with the layout grid and media queries (separated by device). You can find these classes in responsive.less.

Class Phones 767px and less Tablets 979px to 768px Laptops and desktops Default.visible-phone .visible-tablet .visible-desktop .hidden-phone .hidden-tablet .hidden-desktop

Viden	Is hidden	Is hidden
Is hidden	Viden	Is hidden
Is hidden	Is hidden	Viden
Is hidden	Viden	Viden
Viden	Is hidden	Viden
Viden	Viden	Is hidden

When to use?

Use limited functionality and avoid creating completely different versions on the same site. Instead, use these features to create different presentations on different devices.

Testing Adaptive Classes

Resize the window in your browser or run the site on other devices to test responsive classes.

Visible on…

Green marks indicate that the class is visible on this display.

Telephone? Telephone
Tablet? Tablet
Desktop? Desktop

Hidden on…

In this case, green marks indicate that the class is not shown on this display.

Telephone? Telephone
Tablet? Tablet
Desktop? Desktop

Twitter Bootstrap 3 grid system is a fast way to creating html site layout. This is exactly the most basic part in bootstrap, because... thanks to the grid you can create adaptive version site, provides correct location all elements. And the layout development begins with the css class container.

Container (container) with a fixed width.

From the name it is obvious that container contains a given width, changes in which occur as a result of changes in the working browser window.

Alignment occurs at the center with using css properties: .container( margin-left: auto; margin-right: auto; ) Container has padding: .container( padding-left: 15px; padding-right: 15px; )

The table below shows the width of container, which depends on the width of the user's web client window:

Container with rubber width. Unlike a fixed container, container-fluid has no width, and the only thing it has from the CSS classes is: .container( padding-left: 15px; padding-right: 15px; )

A row inside a container.

Once you have decided on the container, you need to move on to the rows. The row takes the same width as the container. Has negative margin:

Row( margin-left: -15px; margin-right: -15px; ) As a result, our construction already looks like this (for example, I’ll take a fixed width):

Using blocks in Twitter Bootstrap. As I wrote before, the css class row is used to create rows. And inside these same rows you need to place blocks:

The content of the site is placed inside the block. You can also place another rows. One row contains 12 blocks.

The block width is specified in relative format using the required number of columns. Starting width – 1 – corresponds to one Bootstrap column, maximum width – 12 – maximum amount columns in one row.

For example: if we need to have 4 blocks with identical width in one row, then we need to set the width to 3 (div class ="col-*-3" > ... div >). The total is 12 (3+3+3+3).

Adaptive layout for gadgets

I previously wrote that Twitter Bootstrap 3 is famous for its grids that are suitable for various user devices, be it a phone, a tablet, or a monitor for your home/work computer). And the time has come to fully understand this.

In the example above, I put an asterisk after the word col. And instead of an asterisk, you need to indicate for which device the given block will be used:

– col-xs-* – used to create a grid with small screens. Telephones fit this definition;
– col-sm-* – for devices with a slightly larger screen width than a phone, for example a tablet;
– col-md-* – medium screen sizes, i.e. netbooks;
– col-lg-* – for large screens. If you believe Yandex.metrics, then this moment the number of users is precisely on sites under these screens. But this indicator very much depends on the topic of the site.

The tables below provide data regarding these classes: Twitter Bootstrap 3 Tiny Screen View of the Twitter Grid System
Smartphones
(Small screen
Tablets
(≥768px and Middle screen
Laptops
(≥992px and Large screen
Computers
(≥1200px)

Fixed layout (class ="container" )	Fits 100% web client width	750px	970px	1170px
Rubber layout (class ="container-fluid" )	Fits 100% of the web client screen width
Class prefix	class="col-xs-*"	class="col-sm-*"	class="col-md-*"	class="col-lg-*"
Bootstrap maximum column width for fixed layout(class="container" )		62px (750px / 12)	81px (970px / 12)	97px (1170px / 12)
Maximum column width for fluid layout (class ="container-fluid" )	The web client width is divided by 12
Padding	15px around the edges

But be careful here! For example, if you use class ="col-sm-*" , it will apply not only to tablets, but also to netbooks and large screens, but this only works if you do not specify "col-md-*" " and "col-lg-*" . Those. if your row will have one block for all screens, then it is enough to write div class ="col-xs-12" > ... div >, and not div class ="col-xs-12 col-sm-12 col-md -12 col-lg-12" > ... div >.

An example of adaptive layout on Twitter Bootstrap 3

In theory, everything seems to be clear, but at the same time nothing is clear. In order to somehow understand and secure all these blocks, rows and understand the meaning of this entire grid, I will consider a small piece of code with the help of which everything will fall into place.

I'm not a designer, and in this lesson you don't need to invent anything super beautiful. For a general idea, schematic images will suffice.

As an example, I am putting together a layout consisting of three blocks, which are located in the same row, but will be displayed differently on user devices. The figure below shows just all this. And, by the way, when you order the development of a layout, you need to tell the designer in advance that the layout will be done for the Twitter Bootstrap 3 framework, because the designer will immediately depict the elements in accordance with the grid.

Large screen width

Styles applied to the layout will be applied when the active area of the browser window (width) is greater than 1200px. From the picture you can see that the containers occupy the entire space of the row and divide it into three equal parts. It turns out that 12 blocks need to be divided into 3 containers (since they are all the same), we get that there are 4 blocks in one such container.

Bottom line for large screen width:

Container No. 1

Container No. 2

Container No. 3

Average screen width

Styles applied to the layout will be triggered when the active area of the browser window (width) is greater than or equal to 992px and less than 1200px. Two containers are located horizontally and occupy 100% width (each container takes up 6 blocks), and one is located with new line and also occupies 100% of the width (container No. 12 occupies 12 blocks). To clearly explain to the browser that the container needs to be placed without wrapping around other containers, twitter bootstrap provides a css class class ="clearfix" . But, one more point, because... this class should apply to this type of screen; you need to add another class - class ="visible-md-block" (md is the name of the screen, similar to classes for the block).

The result for the average screen width (be careful, I will add new classes and elements to the already written code):

Container No. 1

Container No. 2

Container No. 3

Small screen width and “tiny screen” Using the same principle, you need to add classes for the remaining screens. I won’t describe the same thing, I’ll just give a general summary:

Container No. 1

Container No. 2

Container No. 3

For “crumb-screen” you can omit the css class class ="col-xs-12" , because it takes up 100% of the screen width automatically and in order not to clutter the code with unnecessary characters, you can remove them.

The final code for this template will look like:

Container No. 1

Container No. 2

Container No. 3

Different elements on different screens Previously, I used the class ="visible-md-block" - which is displayed on medium screens. More details about the "visible" class: Class name Description

class="visible-xs-*"	This class adds visibility to a "tiny screen" whose width is less than 768px. If the screen is larger, the element will not be visible.
class="visible-sm-*"	This class adds visibility only on gadgets that have a screen width greater than or equal to 768px (i.e. ≥768px) but less than 992px. If the screen does not meet these characteristics, the element will not be displayed.
class="visible-md-*"	This class adds visibility only on gadgets that have a screen width greater than or equal to 992px (i.e. ≥992px) but less than 1200px. If the screen does not meet these characteristics, the element will not be displayed.
class="visible-lg-*"	This class adds visibility only on gadgets that have a screen width greater than or equal to 1200px (i.e. ≥1200px). If the screen does not meet these characteristics, the element will not be displayed.
class="visible-*-inline"	display:inline
class="visible-*-block"	Part of the layout gets the CSS property display :block
class="visible-*-inline-block"	Part of the layout gets the CSS property display :inline-block

The class ="hidden" is used to hide elements.

Class name Description

class="hidden-xs"	This class adds stealth to an element only on gadgets that have a screen width less than 768px. On other screens, parts of the layout will be visible.
class="hidden-sm"	This class adds stealth to an element only on gadgets that have a screen width greater than or equal to 768px (i.e. ≥768px), and less than 992px. On other screens, parts of the layout will be visible.
class="hidden-md"	This class adds stealth to an element only on gadgets that have a screen width greater than or equal to 992px (i.e. ≥992px), and less than 1200px. On other screens, parts of the layout will be visible.
class="hidden-lg"	This class adds stealth to an element only on gadgets that have a screen width greater than or equal to 1200px (i.e. ≥1200px). On other screens, parts of the layout will be visible.

You can also simultaneously apply several classes to one element, for example:

This element will not display on medium and large user screens

The developers of Twitter Bootstrap 3 did not forget about printing documents/web pages and added several classes specifically designed for these purposes:

Another example: If you have an element in one row that is 6 blocks wide and in the center, then you need to specify an offset of 3 blocks:

...

Would you like to improve the responsiveness of your website using Bootstrap? The most important aspect of this framework is its basic 12-column grid, which is used to create a flexible template.

We'll create a simple site using Bootstrap and learn how to use its grid.

Before following this guide

Before you follow the guide below you need to:

Have general understanding what Bootstrap is;
How Bootstrap's grid system works;
Download Bootstrap to your hard drive;
Create a basic Bootstrap index.html file.

What is Bootstrap

Bootstrap 3 is a platform for HTML, CSS and JavaScript developers creating responsive websites. The framework consists of created responsive CSS styles for columns, lists, navigation menus, forms and other elements.

Bootstrap grid system

Bootstrap's grid system classifies screen sizes into four types: extra small, small, medium and large;
Ultra-small are smartphone screens. Small - tablets such as iPad. Medium - stationary and large monitors;
To help fine-tune responsive features for these types of screens, Bootstrap divides the screen width into 12 columns;
Each of these four Bootstrap grid types only becomes responsive if it is given a separate CSS class;
For example, to make a div responsive on small devices, that div should have its own Bootstrap class .col-xs- , like .

Download Bootstrap

Go to getboostrap.com and click the "Download Bootstrap" button:

You will see the "Getting Started" page. Click the "Download Bootstrap" button:

Save the file to your hard drive. It does not need to be saved on the server. Unzip the file and rename the extracted folder to "bootstrap".

Preparing a basic Bootstrap index.html page Step 1: Create a Bootstrap index.html file

Return to the "Getting Started" page and click the "Basic Template" link in the right sidebar:

You will see the Bootstrap template code. Click the "Copy" button to copy the code:

Paste the "Basic Template" code into a text editor and save it as an index.html file in the same folder as the "bootstrap" folder. Now he will home page Bootstrap site.

Open the newly created index.html file in your browser and view your basic Bootstrap site:

Open the index.html file in a text editor and between the tags, add (1). Close this new div after tag (2) and save the file:

Reload the page in your browser and notice that the text “Hello World! " is no longer flush with the edge of the page, but is shifted slightly to the right. The Bootstrap "container" class that we assigned to the div added this padding:

Go back to the index.html file. Between tags and replace "Hello World! " on Trusthub. Save the file and browse the site.

Step 2: Add Content and Sidebar

Go back to the index.html file and under the Trustub line paste the following code:

What Trusthub can do for you

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Our Team

Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel ague. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.

Browse the site again. You should now see the content and the Our Team sidebar, but it is not yet set to a responsive template:

Go back to getbootstrap.com and top menu Click the "CSS" button:

In the sidebar, click the “Grid System” button:

Scroll down to the "Grid options" section (1) and notice Bootstrap's 12-column grid system with four types of screen sizes, widths, and class prefixes (2):

Don't worry, all this will become clear in a matter of seconds when you start creating your first Bootstrap project.

Open the index.html file again and immediately below the line for the existing one, set the class to “col-md-9”. It should now look like:

Go to the div located above the "Out Team" header and give it the CSS class "col-md-3". Save the file.

Adaptive layout using bootstrap. Fast floats and wrap cancellation

Popular articles

Latest articles

Sections

Pages

Special projects

Contacts