CLAIRE CARROLL: Hi, my name's Claire.
I am here at Yale.
And I will be teaching you today about how to use Bootstrap.
So let's get started.
So first, we're going to talk about what Bootstrap is.
It is an HTML, CSS, and JavaScript framework for projects on the web.
So it basically encapsulates a lot of different aspects of how you might
develop a web or mobile application.
And it helps set up transitions between an application
that you might have on your computer or you might have on a phone
and making sure that the layout is going to be visible and display
the way you want it to on different sorts of platforms.
It's also super helpful because it has a lot of pre-compiled and pre-set up
basically libraries for you, and a really expensive but customizable
codebase that you can use to make it sort of do whatever you want.
So it's not going to replace all of your CSS.
You'll still probably want a style sheet.
But it can set up a lot of the functionality in advance for you.
And then, you can modify it as you need.
So why use it?
It's really very easy if you want to make a navigation bar,
instead of fiddling around with padding and columns
and all sorts of containers for a really long time like I
used to do all the time, you can just use the navigation settings
that Bootstrap has already set up for you, which we'll go into a little bit
later.
It has a lot of features for most different things
you could want to put in a web application.
And if they don't have it built in natively,
I'm sure someone has hacked it.
So you can probably find support for a functionality online.
And it's an open source project, which means it's free.
And it's evolving.
So even-- it probably won't change that much during the time
you're working on your projects.
We're in Bootstrap 3 right now.
But it is something that is growing and changing to the needs of the developer
community, which is really cool.
There is, as I said before, a great library with lots of stuff
you can customize.
And it's just very streamlined.
A lot of popular sites use it.
So for example, the NBA website uses Bootstrap to develop it.
And as of last year, Vogue did.
They've since upgraded.
But it worked for them for six months or so.
And same story with Wal-Mart, which is just kind of cool to see,
that big sites use this and are supporting this,
and it can sustain the layout and the intricacies that you might want.
So that's kind of fun.
How to get started with Bootstrap?
Basically, you can pick from three different options of which bootstrap
you think is going to be right for you.
So there's the pre-compiled Bootstrap, which is best for people just
starting out with Bootstrap, people starting out with web development,
people sort of just trying to learn the terrain, which is probably
going to be best for most final project students, at least to start with.
And there is also a source code version, which
you have to then deal with compiling and getting a specific Twitter compiler
to sort of deal with, which is a little more complicated, but not hard.
Because it's still pretty standard CSS and JS
code that you should be able to figure out.
So if that's something you're interested in,
there's a lot of support for how to set that up.
And then, there's also a SASS only version
for Rails projects, which I don't think will apply for many people using
Bootstrap for web apps.
But it might for you, and then it's a valid option.
So the best way to get it is to just go to the Bootstrap website.
You can Google it.
It'll come up.
It's the first hit.
And hit the Download button.
You'll get a folder, which you then can load into the IDE,
or just leave on your desktop if you want to develop there.
But alternatively, if you want to use the terminal to basically get
the project, you can use npm install.
So if you install Node.js and the Grunt client,
then you can use the Node Package Manager to get Bootstrap
installed very easily on your computer.
Or you can also use Bower, which I think is a Mac client.
I've never used it.
But there's a lot of ways that you can get Bootstrap on your computer
and for your applications.
I recommend just clicking the Download button and unzipping the folder.
But whatever floats your boat.
And in addition to the code that you'll get when you download it,
which we'll go into in a second, you can also
access a lot of templates and themes on the Bootstrap website.
They won't be included in the precompiled folder.
So you're going to want to poke around a little bit.
It should be on the same download page.
And you can see that they've already set up some sort of basic, cookie cutter
frameworks for websites that you can use to help act
as a springboard for your own projects, or sort of as an inspiration
if you want.
So here's a list of what happens when you download Bootstrap.
I just used the website and put it onto my IDE.
So you're going to see that there are three sets of folders.
You have the CSS, the fonts, and the JS.
So the way this is split up is there's the minified files, which is probably
where you're going to want to use.
And it includes all of the different functionality,
all of the different libraries that are included in Bootstrap's CSS domain.
So you will use the CSS as your style sheet, or the JS as your script.
And the fonts, you can use on a case by case basis.
I personally don't usually use their fonts.
We'll go into how to deal with that later.
But they can be useful if you want them.
So first, we're going to go into how to set up your basic HTML with Bootstrap,
and then go from there.
So you've actually already used Bootstrap in layout.html
in p-set seven.
They used bootstrap to set up the website.
That was sort of behind the scenes.
So you didn't necessarily interact with it.
But just as a fun aside, it's something that you've already sort of dealt with.
So to get started, we're going to go over--
you're probably going to want to set up a boiler plate HTML
template that has these specific call set ups so that you can use Bootstrap.
You're going to want to put this in a folder for your project.
You're going to need to do chmod, access permissions on the folder to make sure
that Apache can deal with it.
And then, just run it like you would any project.
So use apache50, and then you should have it hosted directly for you
on the IDE, which is really convenient.
So first, we're going to look at what a header might
look like in your template.
So here, you're going to see the blue text says basically
how you might include a bootstrap call.
And this is something that you're going to set up
in the beginning with all of your char set establishments,
basically how the browser should read your code.
So this is sort of a good way of calling Bootstrap.
It's an easy set up.
Sorry, those were flipped.
So here, you're going to see that you have Bootstrap's CSS min as your style
sheet, which is basically the way you're going to get access
to all of the library functionality.
You're also going to have a script as a bootstrap script.
So this will give you access to pretty much anything in the library
that you'll need.
You'll also need your own CSS style sheet, probably.
And that's something that you can add in addition.
You can have more than one.
But this is how you're going to want to set up
at least the beginnings of your code so that you can use Bootstrap later.
In the body portion of your HTML, you're going
to want to add a couple calls just to use the plug-ins later.
You can pretty much just copy and paste these at the beginning of the body.
And it should be fine.
So now, I'm going to just talk a little bit about the basics of Bootstrap.
And then, we're going to go into sort of the layout they set up
for you, how you might implement a navigation bar as sort of a handy case
study.
And then, we'll talk about how they deal with text,
how you might work on design with Bootstrap,
and also how you can go forward towards asking questions and finding solutions
to them on your own.
So Bootstrap basics.
With Bootstrap 3, it switched to sort of a mobile first framework.
So what that means is that the mobile functionality is not
separate from the rest of the library.
Everything is integrated together.
Everything that should work on your laptop should also work on your phone
and be formatted accordingly, which is really handy.
I'm not sure how many projects are going to incorporate web and mobile, sort
of cross-platform development.
But if you need to do that, whether for this project
or for a project in the future, this is a really handy way of dealing with it.
It's consistent across browsers.
It's supported by all the major browsers.
I think there's some functionality that doesn't work on Internet Explorer.
So maybe don't use that when you're developing.
But Firefox, Chrome, Safari should all be fine.
It's convenient in that it has the plug-ins all in one place for you.
So you don't have to call a million different scripts.
You can just sort of call those two or three
that we set up at the beginning of the code, which is nice.
And it's customizable.
So as I said before, they have this library of functions that you can use.
But if you want to change the colors, if you
want to change the way a button looks, if you
want to sort of turn something on its head, you can still do that.
It's not a cookie cutter, like you have this specific button,
and you have to use it in your code.
So this is easier to deal with, or at least
to see how you might want to change things with the full code, not
the minified version.
But it's definitely still manageable.
And that's where your own CSS or JavaScript will come into play.
So yeah, as I said, this just does a lot of the work for you
and gets you developing faster.
So one of the main features that Bootstrap sets up
for you is this grid layout.
And basically what that means is that it sets up a bunch of different columns
that make up your page, whether that's on your phone or your computer.
It doesn't really matter.
And it deals with the most important content first.
So basically, you set up what content needs to be displayed right now.
This is probably more applicable on your phone or something.
But for different browser window sizes, you
specify sort of what content is most important, and needs
to be priority in displaying, and then as it goes down,
the content that maybe can be shifted to if you scroll down to see it.
In addition to columns, you have rows.
So they're used.
They have padding built in.
They set up so that you can have dividers on your page,
so it's not just one giant column screen.
You can have the heading.
You can have a primary drop page.
Then, you can scroll down and maybe get to a different row on something else,
features for your site.
One important thing to remember about rows
is that the only thing-- you can't have a row nested inside of a row directly.
You need to put at least a row, have a row as your parent,
and then a column, and then another row.
Just because of the way the containers and padding
works out in the Bootstrap code.
One problem with columns is that there are-- well,
it's not necessarily a problem.
But there are gutters between them.
So they have about 15 points on each side of your column content
that is set aside just as blank space.
This is usually not a problem at all, right?
Because you want to have some space between your text,
or your pictures or whatever you're dealing with.
But if it becomes a problem for you, if you need something directly adjacent,
that is when you might go into the bootstrap code
and change things around.
Or you might change them in your own CSS.
So just looking at how the grid plays out on different platforms,
so you've got phones, tablets, smaller computers like a laptop, or maybe
larger computers like a big desktop.
So the way it plays out with the layout is on a phone, it doesn't collapse.
The main content just stays pretty static.
With tablets and laptops and desktops, what will happen is the content
will sort of like come into being as you scroll,
or collapse as it needs to happen, which is kind of cool.
For container width, it just sets up maximums based on different platforms.
I don't recommend going against these guidelines.
They are meant to help you make sure that things
are seen the way you want them to be.
And the way those will manifest is in the type of columns you use.
So as you can see at the bottom, there's extra small, small, medium,
and large columns established for you.
And that's where those container widths come into play.
And those, you can mix and match.
You don't have to only use large ones for large desktops.
But the idea is that the largest one you can use on a phone
is the small, the extra small.
The largest you can use on a tablet is the small.
And you can go from there.
So column and grid tips and tricks.
If you want to use offset, basically so what this will do
is if you have a bunch of columns on top of each other
that are maybe different lengths, so you have
one column on the right that's super long, and then a short column
right below it.
And you have two columns on the left.
But you want the second column on the left to be lined up with the short one
on the bottom of the right.
You can use offset just to make sure it doesn't have
the two on the left right at the top.
And then, have an uneven distribution.
And the little stars there just mean what size you're dealing with,
so extra small, small.
So that's not too crazy.
You can also have a class distinction saying clearfix visible.
So in this case, it was for extra small.
And that makes sure that the columns basically just
don't overlap at all, which is convenient.
I recommend it.
Maybe you want some overlap depending on what you're doing for your project,
if you want maybe a picture behind some text, that's
sort of where you might want overlap.
But in most examples, this is going to be a useful feature for you.
And you can see below that sort of an example
of how you might have a row set up inside of a container,
and how the row will have column as its children.
So now we're going to shift gears a little bit
and go on to how you might implement a navigation bar.
Which if we're thinking about it in the Bootstrap grid framework,
it's pretty much just a row container set up
with a bunch of different columns dividing up
what you would put in that row.
So maybe you have a Home button, and a Menu button,
and an Order button if you're making a food delivery website.
But Bootstrap sort of anticipates this and gives you a lot more functionality
than you just having to use columns and then write out
all of the code to deal with buttons and links and things.
So when you're using Bootstrap on mobile,
it collapses the menu of the navigation bar automatically for you.
So you'll have the little tab button in the corner.
And you can click on it if you want to go to a different page, which
I'm sure if any of you have tried to go to a website before on your phone,
you know what I mean.
And you can set up that sort of same collapse on other platforms,
for tablets or laptops or desktops, if you want to.
That's up to you.
A lot of times, you will just fix the navigation bar at the top of the page.
And as you scroll down, it'll stay there.
But again, you can sort of decide.
That's what's so great about Bootstrap is
it lets you choose what you want to do.
You can also sort of rigidly lock in place, like I just said,
if you don't want to do the collapse functionality.
And Bootstrap handles that for you.
So you don't have to deal with making sure none of the body content
interferes with it, or other header content interferes with the navigation
bar at all.
And you can also very easily integrate things like a search box
into your navigation bar instead of trying to put a complicated form
inside of a link.
So this is helpful for that.
So we're going to go into the nitty gritty details of all
of how to implement that right now.
So the way you might divide up sort of the categories of work
that you do on a navigation bar, you have your header,
which you'll assign a role to, which will make more sense when
we look at the code in a sec.
But basically, that's just in addition to defining your class,
you define the role as navigation.
And that helps Bootstrap know that what you're trying to implement
is a navigation bar.
Then, you're going to have the different categories on your navigation bar,
the Home, the Menu, the Order Online.
It's going to be set up like an ordered list,
just like you would do if you were writing the CSS and HTML yourself.
And then, you'll define that class in a specific way
to use the Bootstrap functionalities.
So that's .nav and .navbar-nav.
So this again is just keying Bootstrap into the idea
of how you should format it, get rid of the bullets, center them
probably in the divisions, make sure everything looks pretty.
So this is sort of handling a lot of the trouble for you.
If you want to have a drop down feature in your navigation bar,
so let's say one or more than one of the links
have options, so if you were doing a clothing website,
you might have women's clothing, and then dresses, or sweaters,
or something, or men's clothing, and then belts or shirts.
You can set up drop down functionality, as well.
And then, you just say class equals dropdown-menu.
So it's very straightforward, pretty intuitive.
For stuff like this if you're working on your own,
you would want to probably look up online just what calls to make.
But a lot of the stuff that you're going to want to do is set up for you.
So for the header, like I said before, you're
going to set up role to be navigation.
And you're going to call the class usually navbar-default.
If you set up anything else in your CSS, you'll
add probably more distinctions there.
But that's how you get access to Bootstrap's layout.
And then, you'll see you're going to want
to set up a header for the nav bar.
And that'll just be the main link for the page.
So whatever the title of it is, it'll be formatted slightly differently.
And you can include your link.
So in this case, it would be called CS50.
Going on to sort of the divisions within your navigation bar,
you're going to have an unordered list, which is pretty standard.
Again, you have the class equals your nav and navbar-nav, including
whatever CSS you might want.
So here, you can set up different links just normally in an unordered list,
and it will know how to format them accordingly.
Drop down is a little trickier.
So you're going to put an unordered list inside of the larger unordered list
of categories.
So as you can see here, we're having our list item
which we're defining as class drop down so that Bootstrap
knows what to do with it.
And it's called schools, for example, on this CS50 page.
So here, we're looking at-- with the link,
you establish downdown-toggle and data-toggle as dropdown.
Again, this is just keying Bootstrap into the idea of how
it should deal with the following code.
Then, when you're done with that link, you just have an unordered list.
You don't have to deal with more formatting than that.
Bootstrap will handle that for you.
And then, you call that your dropdown menu.
And then, include the list accordingly.
So you could have dropdowns inside of dropdowns, inside of dropdowns.
There's not really an end to it.
It just depends on what you need it to be.
And then, you end the smaller unordered list, and you can end the list.
One fun thing you can do is include a caret, which is just an item.
You'll say class equals caret, for like a dropdown arrow.
So if you want to have the little triangle that says,
oh, click down to see that it's a drop down,
you would include that on the href for the schools, or your top link,
so basically that it knows to include the little symbol there.
Which is kind of fun.
So additional navigation bar features that I talked about a little bit
before, we have optional collapse.
So on mobile, collapse is standard.
You don't really have an option on that.
You could change it if you wanted to, but that would-- you
might not want to be using Bootstrap's nav bar for this.
You might want to use some other button features
and then set them up on your own.
But if you wanted to collapse a tablet, or laptop, or a desktop application
for their navigation bar, you would just set up
a division on the division you're setting up for, the nav bar.
And you say class equals collapse, navbar-collapse.
And then, it knows that you want it collapsed when you're operating
the page, which is pretty cool.
And so this is coming all before your list, but after the header.
So another feature we talked about was if you
want to fix the navigation bar to the top of the page.
And once again, you just call the bootstrap library and say,
navbar-fixed-top, which is kind of stiff but gets the job done.
So here, you can see an example of adding navbar-fixed-top
to the initial class distinctions we gave navbar
with navbar and navbar-default. And this will sort of lock it at the top
and make sure that it doesn't move.
One thing you're going to want to watch out
for if you do take advantage of this feature
is you'll want to add some padding at the top of your body of the HTML,
whatever your body content is for the page.
Because with the fixed top, sometimes it might overlap and cover
some of the content you're trying to display.
So making sure you add at least probably 50 points, maybe more.
But you can also go on percentages if that looks better for you.
We'll make sure that the content is being displayed clearly.
Another feature you can add is the search form.
So Bootstrap has a lot of form classes set up
for you, which you could use if you wanted to.
But an easier way of doing things is they specifically designed
a navbar form.
So here, you just add the form class as navbar-form.
And for an example, you could do search.
There are a bunch of different options for different forms you might have.
But if you wanted a search bar for the website, for example,
this is how they would set it up for you.
And it'll include the little magnifying glass icon, and it'll say "Search,"
and it will have gray text, and it'll look pretty.
And it will sort of deal with that.
So here, you'll see an example of that.
So you have your form class with role of search.
You're still going to call it navbar-form, as I said.
navbar-left, I think, is just where the text is in the box.
And then, you have your form-control.
You still set the placeholder.
And then, a button type is just a Submit button if you want.
Again, this is sort of part of what Bootstrap sets up for buttons for you.
And that's why it's btn and btn-default.
We're not really going to go into buttons right now,
but that is functionality that Bootstrap does for you.
Now, we're going to shift gears a little bit
and talk about how Bootstrap deals with text.
So a lot of you are probably going to have
maybe at least some blocks of text, if not at least headings
or subheadings, on applications that you're developing.
So bootstrap sort of styles the headers for you.
So if you set h1 or h2, it has already formatted
those in a pretty convenient way.
Obviously, you can modify the way they'll look.
But they'll be prettier than the standard I'm just calling HTML h1,
and it's very large, which is nice.
The subheadings, they changed the color.
So if you're-- I think the standard is to be like a gray.
So the headings will be black, and then the subheadings
will be gray, which is just a nice way of looking at it.
There are also some tags you can use if you're doing very precisely
formatted text that you don't want to deal with the spacing or the lines for.
So the address tag, you can put a mailing address inside of.
And it will do the new lines and space it out,
make sure it's justified correctly, which is a very nice thing.
It bolds things and italicizes it.
It does just a standard mailing address for you.
So obviously, this is something you could probably figure out on your own.
But it might take you a while.
And Bootstrap has already done it for you.
So again, that's sort of a reason why you might want to use it.
You can also use the abbreviation tag.
And so what this does is if you're including an acronym
or something in your text and maybe you want
to include a definition for that acronym,
for people who don't know what it is, or just some indication that it
is an acronym, you can use the abbreviation tag.
And that gives it the little dotted line underneath.
And if you scroll over it, it'll either give you
a question mark, which is kind of funny, or the definition if you provided one.
Bootstrap also provides really nice features
on displaying code in the body of your website.
Excuse me.
[COUGHS] Sorry.
So you just use the code tag.
And then, it formats it.
It'll put it in a different color.
The text is usually red.
It'll put it in some sort of fixed width font for you.
It makes it look like standard, readable code, which is really great.
One thing you're going to want to do is with the tags,
you're going to need to incorporate additional information on that so
that they know where you're starting and where you're ending, like in case you
were to use the word code in your code.
It's just a way of ensuring that you're displaying everything correctly.
So the start, you'll just do ampersand L-T semi-colon.
And then, at the end, you do ampersand G-T semi-colon, sorry,
I forgot that in the slide, and then the ending tag.
So really nice way of writing code on a website if you need that.
But again, it's whatever you need it to be.
Bootstrap's default fonts go in order.
The way CSS deals with fonts is it looks for the first one.
And if it can't find it, it goes to the next one
and keeps going until it gets to the end.
So here, your ideal is Helvetica Neue, then it goes on to Helvetica, Arial,
and then sans serif.
That's just the way all of their text is set up.
You can obviously change that if you don't want to use these fonts.
So you can either use Bootstrap's stored fonts.
Or you can just go to Google Fonts and include the link
that they give you to embed this line of code and include it in your CSS page
that you want to start with whatever new font you have.
But that's just the way Bootstrap sets it
up so that it's not super ugly if you don't
provide any formatting on your text.
So now, we're going to look at what if you have a question?
What if you want to include a button, or a particular method of scrolling,
or anything that I have not gone into, which is a lot?
How should you approach that in relation to Bootstrap
and the Bootstrap community?
So there's a couple steps that I wrote up.
I think they're also pretty applicable for other questions you
might have not related to Bootstrap.
So while you're working on your projects,
you'll have a lot less innate support from things like office hours, right?
There'll be a couple nights of office hours,
but maybe not all the TAs know exactly what you're working on.
So this is going to be a test to see how you can find answers for yourself.
And I think this is a pretty good framework for doing that.
So first, obviously, figure out what you want.
If for example it's buttons, that's just a convenient example, then great.
If it's something maybe more complicated,
then it might take you longer to figure out what you want.
For example, I really like parallax scrolling.
I know it's kind of overrated now, but I still think it's really pretty.
But for a long time, I didn't know what it was called.
So I would just Google obsessively, pretty background scrolling,
and what scrolling does Spotify use?
Because the Spotify page had it for a while.
It took me a while to figure out that it was called parallax.
So for more complicated or less obvious functions
you might be trying to incorporate, it may take you a little while
to figure out what questions to ask.
So once you know what you're looking for, a good rule of thumb
is to try to find an example.
So this is going to depend on how you are approaching this problem.
If you see something you like and then you want to use it,
there you have your example already.
If you know a website that's incorporating something you like,
you can go look there.
You can also look at the bootstrap templates.
And there's a lot of online resources for Bootstrap themes.
And these can be great ways to see what Bootstrap
can do for you pretty explicitly, but also you
should not be limited just to the Bootstrap functionality that
already exists, right?
You're going to want to use this as a springboard
and go off and do your own thing.
So if you can find an example, one thing you can do is view page source, right?
So you right click and view page source.
Or check the source code if it's a template online,
and just see how they implement it.
And probably won't be perfect for what you want,
but it'll be a good baseline for how you might go about incorporating
a similar function in your app.
If you don't find an example, or you just
don't really think it's worthwhile to look for one, look at StackOverflow.
Look at Google.
Look at forums.
Look at the Bootstrap help pages.
Bootstrap is pretty unique in that there's a lot of beginning developers,
or developers who maybe aren't familiar with Bootstrap's library.
Maybe they're a little confused since the library is very extensive.
So that combination sort of creates a perfect storm
with lots of forums, lots of questions, lots
of developers who maybe know the answers and can help along newer users.
So there is a lot of support for Bootstrap online.
So this is a great way of finding help for problems you might have.
If you have a very obscure question, and let's say
you can't find it on StackOverflow, you can't find a good example of it,
you're pretty stuck.
This is where you're going to have to use your own ingenuity.
And so for that, I'd recommend going to Bootstrap tutorial pages.
TutorialsPoint has a good one.
W3Schools has one.
There's a couple-- there might be one on Codecademy.
There's a bunch if you want.
And they'll have at least some framework for how to deal with buttons,
or how to deal with photos.
And basing off of that level of information,
you will then have to take whatever Bootstrap
can give you and then maybe work on your own CSS or JavaScript
and sort of go from there.
So you're going to have to mess with it more yourself instead
of being as strictly guided along, which is sort of fun.
It can definitely get frustrating at time
if you're dealing with, like, padding problems.
But it is worthwhile, especially when you
can show off this really cool functionality that you've worked on.
And then, maybe you can help other new developers who have similar questions.
Because definitely, bootstrap is an example of you
can see what you think is possible just online and in forums.
But then, you can come up with the previously impossible
or just the previously un-implemented, and then sort of change
the nature of how people might use it if it's a really cool functionality
that you've created.
So it's a great community, and this is a great chance
to sort of push the limits of what you can understanding
and what you can just find help for.
So the last thing we're going to touch on
is design practice to help you support your Bootstrap knowledge.
So you set up a navigation bar, you set up a website.
But you don't know how to deal with colors, for example.
So some design tips and resources in addition to the Bootstrap help
is for color palettes.
A really useful tool is Adobe Color CC.
It used to be called Kuler, which I always inadvertently do,
it'll still come up.
And I have the link here if you want to look at it.
But it is just a useful way of getting hex or RBG
codes for a palette of colors that you might use on your website,
and making sure that they look good together.
It can also help you build colors using color
theory of complementary or supplementary colors.
And there's a huge additional library of pre-set up color palettes.
So you can go look there if you see something you like
and then just use the values that they've given you.
There's also another useful page on colors I didn't include here
called Flat UI.
If you Google just Flat and then the letters U and I, it's only got,
I think, 12 or 16 colors on it.
But they're sort of specifically formatted to look really good online.
And I think they're really pretty.
So maybe that's a good way of if you want a base color to base your color
palette off of, you could go there, get the value of it, plug it into Kuler,
and then go on your merry way.
In addition to colors, a good way to get pictures for your site
if you want to incorporate those would be, in my opinion, Unsplash.
It's website you just go to, unsplash.com.
It has a very large library of photos from professional photographers
who sort of are giving these photos up free for anyone to use.
You don't have to attribute them.
You don't have to attribute Unsplash.
You don't have to do anything.
You can just use it, modify, do whatever you want.
So that's convenient so you don't have to deal with attribution or rights
on images, plus they're also just very pretty pictures generally.
So that's a good way to get started if you want inspiration.
And then continuing on the theme of inspiration, sorry,
I didn't mean to do that, there's the Bootstrap Expo, which
is on the main Bootstrap download page.
And it gives you a lot of examples of websites that use Bootstrap
and how they've implemented it and how they've made it work for them.
So this is a good way to see how to take the framework that bootstrap gives you
and expand it into something specific and useful for what you're doing.
There are also, as I said earlier, theme and template downloads
that you can use to get started.
These don't incorporate a lot of innovative design,
but they incorporate at least some to get you sort of off the ground.
And those you can get at start.bootstrap.com.
And then, to leave you with a lasting quote that I really like,
good design is as little design as possible.
So basically, you shouldn't try to get in your own way.
If you clutter things, if you try to show off your cool design skills
and how many things you can do, the intentions of what you're working on
won't be as pure.
And it won't be as obvious for the user how to interact with the site.
So you're going to want to focus on the essentials
so that you can do less while making whatever you do implement do more work.
So less is more, to use the cliche in this case.
And it will help you stay true to your idea
and make sure that it comes to life in a pure way, I guess,
which minimalism is super in right now, which is convenient for us.
Because that makes your life easier.
So as long as you can make informed or at least what you think are informed
design choices, as long as you're really thinking about them, then
you're going to be fine.
And that is it on this lesson on Bootstrap.
I hope it was helpful.
And I hope you can figure out how to use Bootstrap for your own projects.
So yeah, thanks for listening.