Adaptive design. Before following this guide

All tips

Adaptive design is a layout method where the width of the web page layout is adjusted to the width of the device. The simplest option is a proportional change in scale, but in reality it is better to change both the location of the elements and their sizes. This way we will get the most optimal view for smartphones, tablets and monitors.

Bootstrap already has responsive design capabilities built into it. If you make a simple multi-column layout and then start to reduce the width of the browser window, you will notice that the layout itself changes. But it’s not limited to this; it’s much more interesting to slightly change the layout itself so that it the best way matched the device. For this purpose, keywords that appear in class names have been introduced; they are presented in table. 1.

To set the width of the columns for smartphones, just include the col-xs-N class in the code; for monitors it will already be called col-md-N. Any classes can be combined with each other; if the class for the selected device is not specified, then it is inherited from bottom to top. This means that the smartphone layout will look the same as the monitor layout. But not the other way around. This is why layout always starts with a layout for a smartphone, then a tablet and a monitor.

Since we are now focusing on mobile devices, we need to add the following line inside.

Now our design will scale to the width of the device and look optimal, especially on devices with small screens.

Taking into account this line and the new classes, we will make a simple layout with two columns (example 1).

Example 1. Responsive Layout

Responsive layout ( background-color: #eee; text-align: center; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; font-size: 2rem; ) Heading Column 1 Column 2

To test the layout, it is not necessary to view it on a specific device; it is enough to reduce the width of the browser window and we will immediately see the changes. In Fig. Figure 1-3 shows the result of this example for different window widths.

Rice. 1. View on a smartphone

Rice. 2. Tablet view

Rice. 3. View on the monitor

We considered the simplest case, when the arrangement of elements practically does not change relative to each other. What if you need to rearrange elements or remove something for small screens? We can’t do this directly, so let’s go to a little trick- add two identical elements in different places and hide one and display the other. Bootstrap offers two sets of classes for hiding and showing elements depending on the width of the window - hidden-xs and visible-xs-block . The principle is the same as when working with columns, instead of xs we substitute the desired keyword. Example 2 shows how to “move” the title in this way.

Example 2: Changing the title position

Heading Column 1 Column 2 Heading

The result of this example is shown in Fig. 4.

2 votes

Welcome to the pages of the start-luck blog. Luck starts here. If you are trying to create a good, competent website as easily as possible, but do not yet fully understand the programs, all the terms and code, then this article is for you.

Adaptive Bootstrap layout - how is it all interconnected? Why do you need a framework, what is it, how does it help and does it really make life easier? I will also tell you how to use the program to the maximum without harming the future project, and where to find good lessons. Well, shall we begin?

A little about Bootstrap

I assume that not all of my readers understand well what a framework is and have already managed to download and figure it out on their own. I'll start with information specifically for them. Recently I wrote about adaptive layout and called Bootstrap a program. I did this to simplify perception, although the framework is not that at all.

This is a set of applications, scripts or plugins, so to speak, that make it easier to create special forms on the site, carousels with images, show the site on mobile devices or not do this, and so on.

As you probably already know, for each of these actions the programmer must come up with and write code. If you use Bootstrap, you don't have to do this. You simply take a ready-made template and change it as you wish. As a result, work time is reduced significantly.

In addition to speeding up, the priorities of this framework also include reducing the requirements for the webmaster. Ideally, the site is created by a person who is very well versed in JavaScript and can write everything himself. If you work with Bootstrap, then your knowledge may not be as deep. A basic level will be sufficient.

Possibilities

You can see what Bootstrap 3 is capable of on the website with Russian documentation in the sections css, JavaScript and components. After clicking on the desired tab on the right, a very convenient menu, which allows you to go to the desired location in the document.

On specific examples This shows what the part of the code responsible for a particular action looks like, as well as the result. You can set the content visibility for any mobile devices. Permissions and other settings have already been completed.

The course itself Practice from A to Z"lasts about 17 hours. During this time, you gain important theoretical knowledge, and then practice how to use certain elements correctly: which elements to remove from the code, what is needed to make the site work faster, what it is and much more.

Well, one more bonus course, TOP 4 add-ons for Bootstrap that will help the framework work more efficiently.

Well, that seems to be all. Subscribe to the newsletter and learn more about simple solutions to complex problems and the right approach when working with not quite the right products.

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 in the direction of 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 At this stage you need to cut and save only general images, which 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 - the 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 CSS styles We will store it 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 is 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 a specific screen size. 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 will 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 special devices 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 a background on the div, and put an inline h1 into it with the desired font and background color of the page to create the impression transparent background for 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 will be replaced by the parent selector at compile time using LESS syntax: ".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
Through variables for the jumbotron component we will set White color text and 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

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 simple layout in two columns, create a class.row and add the corresponding 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.

Responsive Design Enabling Responsive Capabilities

Enable responsive CSS in your project 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 on different devices.

Use the adaptive capabilities of Media Queries only to create a mobile version of the site. For large projects, we recommend creating a separate version of the 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 one 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

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 website 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 basic Bootstrap file index.html .

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 becomes responsive only if it is assigned separate class CSS;
For example, to make a div responsive on small devices, this div should have its own Bootstrap class .col-xs- , for example .

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".

Preparation of basic Bootstrap pages index.html 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 become 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 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 CSS class"col-md-3". Save the file.

Adaptive design. Before following this guide

Popular articles

Latest articles

Sections

Pages

Special projects

Contacts