Bootstrap Grid System

Loading...

En provenance du cours de The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1329 notes

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1329 notes

Cours 1 sur 4 dans Specialization Full-Stack Web Development with React

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

À partir de la leçon

Front-end Web UI Frameworks Overview: Bootstrap

This module gives you a quick introduction to full-stack web development and the outline of the course. Then you will learn the basics of Bootstrap, setting up a web project using Bootstrap. You will learn about responsive design and the Bootstrap grid system. At the end of this module, you need to complete your first assignment.

Responsive Design9:13

Bootstrap Grid System27:02

Exercise (Video): Responsive Design and Bootstrap Grid System Part 120:25

Exercise (Video): Responsive Design and Bootstrap Grid System Part 214:54

Rencontrer les enseignants

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

In the previous lecture,

we learnt about responsive design.

We also briefly mentioned that the Bootstrap grid system is

designed for supporting responsive websites.

How does Bootstraps grid support this?

And what exactly does Bootstrap grid involve,

that enables us to design responsive websites?

Let's talk a bit more detail about the Bootstrap grid system,

and how it supports responsiveness next.

We saw the use of the viewport meta tag in the previous lesson,

when we did the initial exercise on setting up Bootstrap in our index.html page.

I briefly referred to this particular line in the code then.

Let's try to understand why we use this in our index.html page.

What we are specifying here is that,

when our web page is being rendered by the browser in a particular device, then,

their rendering in the browser will take into account the size of the screen and

automatically adapt the rendering of the page to the devices screen width.

That way, then we have responsive classes,

CSS classes built into our UI framework,

then that will ensure that our web page is

correctly rendered for that particular screen size.

This is where the Bootstrap grid system comes to our rescue and

enables us to design responsive websites.

So again, emphasizing this point,

Bootstrap grid is designed to be responsive.

You have already seen what this means in the previous lecture,

and mobile first, which we have already discussed in the previous lecture and then fluid,

automatically adapting to the screen width.

The Bootstrap grid takes advantage of the CSS flexbox layout.

The CSS flexbox layout which is being supported by

the more recent versions of the various browsers,

enables a lot more simpler and flexible layout options in CSS.

Now, the actual discussion of

how CSS flexbox layout works is beyond the scope of this course,

we will restrict ourselves to how CSS flexbox is being

leveraged by Bootstrap for its grid system.

Earlier Bootstrap had its own grid system which was predating the CSS flexbox layout,

but the latest version of Bootstrap

has made the CSS flexbox layout as the standard for the Bootstrap grid.

This flexbox layout can easily handle

dynamic content and can adapt the containers to the dynamic content,

and also can easily adapt to unknown size of

the actual content enclosed inside the containers.

The flexbox layout also supports direction-agnostic layout.

What the flexbox layout brings to the Bootstrap grids is the ability

to do easy vertical alignment of the content within a parent element.

We"ll see the use of this in the exercise that follows.

Also, it allows easy reordering of the content

across different devices and screen resolutions with the help of media queries.

Again we'll see a little bit of that in the exercise on how Bootstrap

leverages that to support interesting ways of laying out content.

Also, that content itself,

the content containers can also be designed to be equal height columns so that

the content container with the largest height determines

the height of all the remaining containers that are laid out in the same row.

Let's now talk a little more details about the Bootstrap grid and how it actually works.

The way the Bootstrap grid works,

is by applying a container plus to the outermost layer.

We might use a div for

defining the element for which we apply the container class in general.

The container is the outermost unit within which the actual content is laid out.

Bootstrap supports both the container class which is a fixed width layout,

which means that the content itself is restricted to a fixed width on the screen.

This container class enables this fixed width to automatically adapt itself to

the size of the screen by using media queries so that

is where the responsive design comes into our rescue.

Later on, we will see how this container will adjust to different screen sizes.

Now, we also have the flexibility of using in

other classical container fluid which enables

the container to automatically adapt to the size of the screen.

But the fixed width container,

fixes the size of the actual layout width.

Inside the container, the content will be laid out in the form of rows,

so typically what we would do is inside

and out of div to which we apply the container class,

we"ll include an inner div to which we will apply the row class.

So, the content itself will be vertically divided into multiple rows.

And once this is divided into rows, within each row,

you can then layout the content using columns.

So, each row in Bootstrap,

will be divided into 12 equal sized columns.

Now, you can design your content to occupy any number of these 12 columns.

So, and the fact that the content itself adapts to

the screen width and the row itself being

enclosed inside the container will automatically adapt to the screen width,

and also the columns,

the 12 columns will be determined.

Their widths will be determined by the row by itself.

So, which means that for a different screen sizes,

whatever content you layout all of those 12 columns will automatically adjust

itself to the width that is allowed for the content.

So, this is how the responsiveness is built

into the Bootstrap grid way of laying out the content.

So, how exactly do we layout the content?

We'll talk about that in the next few slides.

The Bootstrap grid itself,

makes available to us five classes to specify different screen sizes by default.

There is a default class which targets all screen sizes,

starting from extra small to extra large.

So the entire range of screen widths in Bootstrap terms,

is divided into extra small, small,

medium, large, and extra large screen sizes.

Then look at how these different classes

of screen sizes are determined in detail in one of the later slides.

So, within your code,

you will identify the layout specification by

specifying sm for the small screen size,

md for medium, lg for large,

and xl for extra large screen sizes.

So, when you do the layout,

as we saw in the previous slide,

every row in a Bootstrap grid system is divided into 12 columns.

Now, we will layout content using what is called as the column classes.

For the column classes,

we can specify how the layout is done for different screen widths.

Look at the details of this in the subsequent slides later.

But let me quickly draw your attention to how we specify the column sizes.

They might specify the column sizes as col,

which is one of the classes they will say col-sm for

small and col-md for medium and large and extra large and so on.

Now, these column classes are used to specify

exactly how many columns in a row will each piece of content occupy.

How does this work?

We'll see that in the next slide.

So, going back to our Bootstrap Grid,

suppose we have a piece of content and we want to lay out the peace of content.

We can specify that that content is enclosed inside another div,

to which we apply column class,

like for example, col-sm-5.

So, in that case, what we are specifying is that for small to extra large screen sizes,

this piece of content will occupy five columns out of those 12 columns.

Now, you are going to immediately ask me,

what about the extra smocking?

If it is not explicitly specified for the extra smarted lockette

by the entire breadth of the 12 columns,

they can explicitly specify from which range to

which range the column layout will occupy how many of the columns.

So, in this particular case,

when I specify I only call them sm-5,

what I mean is that this particular content that is enclosed inside those div,

will occupy five columns for all screen sizes,

from small all the way to extra large.

Now, we now see that out of the 12 columns,

we have already occupied five columns.

There are still seven more columns left.

I could take another piece of content and then position it to the right of this,

by defending another div and then applying column sm-7.

Now, in this case,

you see that 5 plus 7 is equal to 12.

So, these two pieces of content that are enclosed in the two divs,

will now be positioned side by side,

and the sum total of them is occupying the entire 12 column width.

So, this is how we can specify and the work with the 12 columns

in defining the layout of the current tier.

With the use of the CSS flex box layout,

Bootstrap also supports what is called the Auto-layout Columns.

So, in this case,

I can simply specify

column sm without specifying how many columns it is supposed to occupy.

But in case I specify three Doobs width column sm in my heml 5,

then the bootstrap grid will automatically position these contents inside those divs,

side by side, so,

that each one of them gets one third of the total width.

So, since we have 12 columns here,

each of these three will get four columns each.

And this is automatically taken care of by the bootstraps layout mechanism.

Now, we can explicitly specify

the number of columns a particular piece of content occupy.

So, for example, suppose I specify three column classes,

but the middle one I specify column sm 6.

Then what happens is, when bootstrap does the layout,

the middle one will occupy six columns,

and then the left and the right pieces of content will occupy whatever is left off.

So, out of the 12 columns that we have,

if 6 columns that occupied by the middle piece of content,

then we have left with us 6 more columns and that will be equally

divided between the contents and the two sides of this middle column.

So, each of them will get free columns of space each.

So, that is how the layout is automatically done with Bootstrap.

In the exercise, we will see various combinations of use of these kind of

specifications of how many columns each piece of content will occupy in color layout.

This table summarizes the way Bootstrap treats

the different screen grids and correspondingly how you identify these screen grids.

So, as I specified earlier,

Bootstrap divides the entire screen width range into 5 classes.

The extra small screens are those whose grids are below 776 pixels.

Small screens are those that are between 576 and below 768 pixels.

Medium screens from 768 to 992,

large from 992 to 1200 and anything about 1200 pixels width

is treated to be an extra large screen.

So, this is how the default Bootstrap Grid is configured.

Now, once you get comfortable with Bootstrap,

you can also configure these divisions yourself.

But for this course,

we're going to stay with the default configuration that bootstrap supports.

Now, the grid behavior in this case,

is that whatever is laid out for extra small,

will be horizontal at all times,

for the higher bits they'll be collapsed to 2start width,

but horizontal about the break points.

We'll see how this works in a short while with some examples.

Now, we saw the use of the container in the previous slide.

For extra small screens,

the container width is automatically determined by the screen width.

But for small, medium,

large and extra large,

the container width is as specified.

So, if you use the div with a class container,

then for small screens it is 540 pixels.

So, you'll notice that if you have a screen width between 576 to 768,

your content will be laid out in 540 pixels,

will be centered in the screen width.

So, the leftover space will be left as margins on either side of this content.

Similarly, for medium it is 720 pixels and so on.

Now, then you specify how many columns each content occupies.

Then the column class prefixes that you will use

is.col for extra small,.col-sm for small,

all the way to extra large.

If you specify something with.col-md,

then that applies for medium to extra large screens.

So, whenever you specify any col- and some numbers,

then that applies to that particular screen size and everything about that screen size.

Now, in all screen size cases,

the number of columns is defined to be 12 columns.

The grid in case of bootstrap is designed to be 12 columns and that is configurable,

but the default value is 12 columns.

The reason for choosing 12 is that 12 is a good multiple of two,three,

four and so on.

So it gives you a lot of flexibility in terms of

how many columns you choose to lay out your content.

Between each column, so if you lay

out two pieces of content side by side with their divs,

between these two pieces of content they'll be a small gutter that will be left.

Empty white space that'll be left off width the gutter width,

which is just 30 pixels by default.

So, 15 pixels is from one piece of content and 15 pixels from other piece of content.

SumTotal together 30 pixels of

white space will be left between the two pieces of content.

Think about how a newspaper column layout

is done and you begin to see the correspondence between

the newspaper column layout is done and how

the bootstrap's grid does the layout of the content on that pitch.

Bootastrap's grid allows you to do next level content,

so you can enclose content inside content and then do nested content layout.

Also, it supports offsets.

We will see the use of offsets also in some examples later.

So let's look at our first example of how you would apply bootstraps column classes,

and how they would actually be rendered on different screen sizes.

Here is an example of a situation where I applied to the two divs,

column hyphen 12 and then column hyphen sm hyphen five for

the red piece of content and for

the other one I applied column hyphen 12 and column sm seven.

So the way this content will be laid out is for extra small screens,

the two pieces of content will be stacked one on top of the other.

So the red one will be stacked on top of the sea green colored one.

But for small to extra large screens,

the two pieces of content will be laid out side by side.

The reason for this is because we said column sm five and column sm seven for the two.

So for small to extra large they're laid out side by side so

that the red content will occupy the leftmost

five columns and the sea green content will occupy the right seven columns of your row,

all the way from small to extra large screen sizes.

So this is how we would specify content layout for different screen sizes.

Bootstrap also provides additional classes called as

the Order Hyphen Classes which allow you to reorder the content on the screen.

So for example, if you apply an order sm first,

an order some last class to the divs,

as is shown in the example here, in this case,

the div for which you apply order sm last will be pushed to

the right side of the screen and order

sm first div will be pushed to the left side of the screen.

So, applying these order classes allows you to reorder the content on the script.

Not only this, the order sm also allows you to specify same order sm one to

order sm 12 to specify the order in which the content needs to be rendered on the screen.

So using a larger number,

you could shift the content to the right side of

the row and a smaller number will shift the content to the left side of the row.

We will see an example of this also in the exercise.

The mixed interesting support that Bootstrap Grid brings with the use of

the Flexbox layout is vertical alignment of content.

The earlier Bootstrap versions,

like Bootstrap 3 and earlier,

did not have the ability to do vertical alignment of content.

With the use of the Flexbox for designing the Bootstrap Grid in Bootstrap four,

we get the flexibility that CSS Flexbox brings in terms of doing vertical alignment.

So if you wanted the content to be vertically-centered,

then to the row,

you would apply the class called "align items center".

So in this case, whatever content is laid out,

will be laid out vertically-aligned within that particular row.

So the content which occupies

the largest height will be the one to which the remaining ones will be

aligned when it is laid out in that row or if you pre-specify the height of the row,

then all the content will be centered vertically within that particular row there.

Not only that, Bootstrap's Grid also supports horizontal alignment of content.

Let's look at an example.

So if you specify your content like this.

Say, you have three columns and the first one you specify div class column three,

then the middle one you'll say div class column auto.

I'm going to come back to that column auto in a short while.

And the right one says div class column 3.

So in this case, what we are specifying is that the left and

the rightmost pieces of content will occupy three columns each.

The middle one, when I say, "column auto",

it means that the number of columns that this particular div

occupies will be automatically determined by the content that is enclosed inside there.

So based upon the content,

the number of columns occupied by the div will automatically adjust itself.

In this particular case, in this layout,

that particular content is being accommodated within four columns.

So now you have four columns being used by the center div,

three columns by the left and three columns by the right.

So sum total, you have 10 columns.

So you have two columns that are left empty.

Now, if you specify for the row,

you specify justify content center, then,

the entire content in this particular row will be centered with

respect to the row horizontal.

You can also have the content left-justified,

right-justified and a couple of other options.

Details are in the bootstraps documentation.

Bootstrap also allows you to do column offsets.

How does this work? Let's look at an example.

In this column offset,

we can specify a piece of content,

add to that if we apply the class as offset hyphen sm hyphen one.

What we are specifying is for small to extra large screens,

this piece of content should be right-shifted by one column.

So when this content is laid out, as you can see,

the leftmost one column is left blank and the content is shifted right by one column.

And you can layout the remaining content on the right side.

So sum total, you can see that the two divs will

occupy 11 columns but one column offsetted to the right.

So that is how we can control the layout of the content using a column offset.

So as you can see,

using the column size specifications,

the vertical and horizontal alignment,

the offset, the push and the pull,

and flex first and flex last,

we are able to get a lot of control on how we lay out

contents for different screen widths and different screen sizes.

Bootstrap goes even further by allowing you to nest content inside divs.

So for example, if you specify two divs,

as you see with column sm five and column sm seven,

the two contents will be laid out as seen here.

Now, inside the right div,

I can again go in and divide

that div's width into a row and then that row will automatically give me

another 12 columns for that part of the screen and then I can then do the layout using

nesting of the divs and do the layout for different parts of that column.

So nesting like this,

brings you even more flexibility in the way you lay out content in your pitch.

With all the discussion about the Bootstrap Grid System and how

the Bootstrap Grid supports various ways of laying out content,

we're going to now, move on to our next set of exercises.

We're going to apply the Bootstrap grid to our index.html page in

order to do the layout of the content inside or index.html page.

We will also use some custom CSS classes.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play