Bootstrap is quickly becoming one of the most widely-used and easily recognizable responsive frameworks for web and device development. The system is elegant and provides an easy way to rapidly build a solid business presence online without having to worry about managing different applications for each device. In this course, we’ll examine the tools, components, tips, and tricks that will quickly introduce Bootstrap to you, and will effectively guide you all the way through advanced development. By the time you complete the course, you will be familiar with all of the essential tools and components you’ll need to start building your own robust Bootstrap templates, and as a result, be able to create one template to use for user interface presentation layers for the web, tablets, and phones!
This course is designed for anyone, but here are some roles you might be in where I think you’d really benefit from completing this course:
·A seasoned back-end developer who has to do some front-end development, or who is looking to start their own company [any startup would benefit], or the .Net developer who understands that Bootstrap is now built-in to the MVC projects and knowing this system can really enhance your projects
·A solid web developer who wants to learn about the components and styles in bootstrap so they can build templates for resale online.
The course will start you off with an overview of what we’ll cover, so make sure to watch the first couple of videos (they are free for your exploration). The first section of the course will get us set up for development with some different tools and files we’ll need to start building our templates and projects going forward. We’ll then progress into a nice overview of the most essential component of the Bootstrap system: the grid.
·Simple Text and Page Copy
·Lists and Listgroups
·Contextual Colors and Backgrounds
·Images, Responsive Images, and Thumbnails
·Forms and Form Groups
·Buttons and Button Groups
·Navbar, Dropdowns, Navs and Tabs
·Collapsing Panels (Accordion)
·Tooltips, Popovers, Modal Dialogs and Affixed sections
·Scrollspy [very nice for Single Page Applications]
·Using the Bootstrap Configurator to easily create a custom build
The last part of the course will be an advanced study, and will take you to the next level with your Bootstrap development. The last part of the course provides some very handy tips and tools for automating builds, including getting Node, Grunt, and LiveReload working. By the end of the advanced section you’ll see how to use mixins with LESS and CSS and automate the build in a way that automatically refreshes your webpage so you can immediately see the changes. The mixins and styles we’ll examine in the advanced section also give us the tools to add things like rounded corners and shows how to build semantic HTML instead of divs with classes for columns and rows in the grid. We’ll finish the advanced section with a look at transformations, animations, transitions, gradients, and other CSS goodies that we can leverage to make our pages go from good to stunning.
This is our course welcome! Here we talk about who the course is for and what the course is all about. We'll go through a couple of good things about Bootstrap and discuss the topics and sections of our course. The video concludes with demonstrations of some of the pages we'll be building during the course.
In this video, I take a moment to talk about a few tips I have for anyone trying to learn anything technical. Please take a moment to review the lecture to see if there are any strategies you might be able to employ to help you have a better experience with this - or any other - technical course.
In this video, we go to Get Bootstrap and download the bootstrap files. We then extract the files into a project directory which we'll use going forward to build our pages. In addition to downloading the files, we also take a look at what's included with the release and examine the folders and files after extraction to familiarize ourselves with the files we'll be working with going forward.
Feel Free to skip this video if you already have an image editor.
Even if you don't have an image editory, this step is completely optional, but is a good thing to do if you're going to be editing images for templates. We won't be covering it's use in this course but I'll be using it to create images and you can then use it to edit any posted images to suit your needs [or create your own images].
The Gimp is a free program that works like Photoshop or other image manipulation programs. Essentially, it is a good idea to have some tool like this handy so we can easily create some images to use on our pages. The nice thing about the Gimp is that there are a lot of great features included and we can create .png files, which can have transparent regions.
For our course, anytime we are going to need images, I'll include them, or give you links to placeholder images or other downloadable content, so you could potentially recreate the same page details as we build them in the videos. I do recommend you start learning how to create your own images and edit them if you're going to be building templates and doing UI development going forward.
If you are not on a Windows machine, there are many editors available to you. A simple Google search should help you find one, or there may already be an editor installed. Perhaps you even have an advanced editor like DreamWeaver already at your disposal. Truly it is up to you how you want to go about editing your html/css/js files. In the later part of the course I'll be using CrimsonEditor on my demo machine, so that is another free option you could consider.
If you already completed the free HTML course that I offer through Udemy, then you should already have this program installed or should already be familiar with how you prefer to edit your html files.
UPDATE: A student in my Web Development Course has pointed me to this open source project: Aptana. Even though the course demonstrations will be done with the Microsoft Expression Web, there is no reason you can't use the editor of your choice. I really like this editor and will be using it going forward in future work and courses involving web development topics, and do recommend you try it!
Also, a special thanks to Joseph C. Caswell, who brought this editor to my attention in the HTML Introduction course I offer here on Udemy.
Before the questions come rolling in and before some of you start to freak out -- don't worry: The amount of JQuery you will need to use is not very much (if any) and you won't need to understand JQuery to use Bootstrap. Knowing some JQuery will of course give you more ability to be an even more awesome UI developer, however, so if you don't know it, you should get it on your radar!
All of that being said, Bootstrap uses some JQuery behind the scenes, so we need to have it referenced on our pages. I personally like to include my own copies of all the files for a few reasons. The main reason is you can't use a CDN offline, so if you want to work without an internet connection you need the file stored locally. Also, if you are an advanced user, you can use the uncompressed versions and set up some debugging in the extremely rare instance that something went wrong.
Therefore, in this video we browse out to Get JQuery and we save a copy locally so we'll have it available for our development.
In this lecture we "live-code" our first page that sets up the framework for using bootstrap. It is important to take the time to work through things like this so that we can remember them later and also so that we can know where to modify and make adjustments when we want to do more advanced coding.
This video is for those who are impatient or under a time crunch and need to get something going. In this lesson, we go out to some of the base examples from the getbootstrap examples, and rip out the html and css that we need to create our own version.
As stated in the video, the page is not complete, but this demonstration should give you some of the skills you need to get one started quickly should you need to. While the examples are a good start, we'll be taking a good look at the components and layout of the pages ourselves, so everyone will be better served by continuing on with the lessons and using what we learn to build our own awesome bootstrap pages.
One more thing to note: I didn't show this in the video, but you can right-click on the link and select 'save as' to quickly download the html for any of the templates. You will still need to dive into the source, however, if you would like to grab the associated CSS and JS files that may be referenced on a template.
Use this simple cheet sheet to remember a few tricks about the layout. We'll be learning the layout for the grid rows and columns and the container in the next few lessons.
In this video, we take a look at adding rows for our page layout with bootstrap. We will continue to build on this going forward with our look at columns in the next section, but this will get us set up for understanding the grid rows and how they will be used in the code.
In this video, we take a look at how Bootstrap handles columns within our rows. Using the cheat sheet from lecture 9, we are able to look at the four different device sizes that Bootstrap accommodates. These sizes are used when determining the column layouts for each screen size.
Once we know how the four sizes work, we are able to use those classes in combination with column spans to create our layouts in a flexible manner. It is important to remember that if we want to span the entire row, our column spans should total 12. It is also important to remember that sizes do not have to be the same for each screen size, which is incredibly handy if you have a section that needs to stay relatively larger as the screen size decreases.
I encourage you to take a moment after the lecture and adjust some of the sizes yourself so that you can get used to seeing how they lay out and how you can make column sizes change the layout of the page based on device size.
In this video, we take a look at making nested rows and columns within the rows. This is a very good look at some of the things we may be doing on real pages when we need to have various layouts.
We also get a chance to see what might happen if we don't span the entire 12 columns and take a look at having columns with various widths for different device sizes.
In this video, we take a look at using the "row-fluid" class instead of the regular "row" class. When we apply the "row-fluid" class, we see that our page gets a little bit nicer when looking at our nested rows. This is very handy if we want to offset our content within the nested columns, and allows us to easily see which columns are contained in which rows.
In this video, we take a very quick look at wrapping content in containers. The class "container" on the div centers the content with a fixed-width. When we add "container-fluid" to the div class, we get a more responsive content section which expands and responds as the page is resized.
It is important to note that although we have seen to this point some pages using rows and columns outside of containers, in order to guarantee our layout spacing we should put rows and columns inside of containers.
Sometimes we want to have content that doesn't span the entire row but has a specific relative position in the row, or is perhaps evenly spaced. In this video, we take a quick look at using some offsets to set content apart with a larger center gap as the page size increases.
In this video, we take a look at using push and pull to move columns to the left or right. Essentially, when we place these classes on our column div elements, it is like attaching "float:left;" or "float:right;" to the item, and allows the page to render the element on the right or left of the current container.
In this video, we look at using the built-in clearfix to eliminate some issues with overlapping div elements. Specifically, as we pointed out a couple of lessons ago, one of our nested rows was getting overlapped and the next row seems a bit too large. Adding in some "clearfix" class elements will do the trick!
This video gives a brief overview of what we'll be hoping to accomplish during section 4, and shows a bit of cleanup for the project directory and creation of a default template for our pages in this section.
In this video, we go over using the "lead" class on paragraphs to add emphasis to a paragraph. In addition, we discuss how we can use the "abbr" tag to add an abbreviation to specific text that shows the entire text when we hover over it with the mouse pointer. Finally, we wrap up this video with a look at the "initialism" class, which can be used to make text smaller.
In the video I start with index, but you can just start with the starter file below.
In this video, we discuss how using <small>..</small> allows us to de-emphasize text, <b>..</b> or <strong>...</strong> allows us to embolden text, and <i>..</i> or <em>..</em> allows us to italicize text.
In this video, we discuss a couple of ways in which we can align text with some styles, as well as take a look at separating quotations and attributing their authors in predefined blocks and styles.
In this video, we look at a pre-built page that shows a few ways we can highlight code blocks and user directions. Use the <code>...</code> tags to create a small code highlight (and don't forget to replace < with <, > with >). Use <pre>...</pre> to highlight a large code block, and use <kbd>...</kbd> to emphasize a user keypress or action item.
In this video, we start with the lists_starter.html file and use it to show how we can easily style lists to change layout and appearance using built-in list styles in Bootstrap.
In this video, we take a look at creating tables using the default styles available from the Bootstrap template. Adding different classes, we can actually get some nice looking tables right out of the box.
We'll continue to build on this knowledge in the next lesson when we start looking at using some colored text and backgrounds using Bootstrap styles.
In this video, we take a look at applying some built-in classes that will style text color, background color, and element color. As with any markup, the styles can be applied to any element, and in this video we just use tables and their rows to easily show the applied styles.
In this video, we take a look at using images on our pages -- both with the default tag and with the added classes from Bootstrap to make them responsive, appear like a nice thumbnail or have rounded corners or be circular. I've included the banner image, but feel free to use the GIMP to create your own. Also, I have not included the dog picture that I use, but I found it online at MorgueFile. You can find any image or just create another placeholder. Dimensions of the banner were 2500x250 and the dimensions of the dog were around 850x600.
In this video, we take a look at the built-in styles for forms in bootstrap. Different situations call for different layouts and controls, and Bootstrap gives us a great deal of flexibility. Additionally, there are some nice classes that are easy to implement which allow us to style the entire group with colors and icons. We also have the ability to easily control the size of items and can use our standard columns to guarantee position for elements in the form.
In this video, we take a look at some of the different ways in which we can render buttons. We address the fact that sometimes we need to post to forms and other times we don't, so we can use the same styles on input submits and input buttons as well as the button tag itself.
At the end of the video, we also look at how we can override some of the colors and states such as hover and active to make our buttons appear as we would need them to when we're building our own themes.
In this video, we discuss how we can use built-in visibility classes to hide or show elements based on some simple jquery toggles to add or remove classes or by using the built-in visibility classes for screen size. This is one of the best features available as we can easily create completely different layouts for different screens should we so desire.
In this video, we discuss how it is possible to use the configurator on the getboostrap site to change some of the settings and thereby affect the theme. This is extremely handy for those who do not really know CSS or LESS and want to find a way to easily change the color shemes for any of the default bootstrap elements.
To show how this is done, we use a default project with our carousel page that we built a while ago, which I have modified and included some images as well to make the carousel look more realistic. We then go out to the site and review how they use the LESS variables on the page as well as talk about how we can modify the colors for the variable, but caution against changing specific variables in place.
Finally, we modify the height of the navbar and change the navbar-inverse bg color to a bright orange color, download the files, and place them in our custom folder with carousel2.html. We then take a look at the wonderful changes we made to the site using the configurator.
In this video, we go over using glyphicons, input and button addons. Glyphicons are included with the bootstrap distribution. Using addons in combination with glyphicons or other controls such as checkboxes or radio buttons gives us a great overall look and feel for our site pages.
In this video, we look at creating some dropdowns using regular links, unordered lists, and buttons. There are a couple of different options presented to give some different views of the types of things we can do in the Bootstrap framework.
In this video, we take a quick look at using labels and badges. Both are extremely easy to use by simply referencing classes. Take note that Labels use the same info/warning/success/danger/primary keys that we're used to for specific coloring and styling.
Badges are used to show changes and bring user attention to new details in large sections, and are easily added with the 'class="badge"' attribute.
In this video we look at three components: ListGroups, Panels, and Wells. These different items all have good uses with wells and panels probably being more popular. We again see how our class styles for primary, info, success, danger, and warning can be used to style items, and look at the panels to see things like header, title, footer, and body. Just like any other html element, we can always add our own styles to any of the components of the panels.
Wells are great for a quick highlight of essential content. Note the sizing classes really just change padding inside the well, and the well itself will be sized by the content.
Listgroups are a quick and easy way to group list content with some borders and even spacing. Listgroups can also use the contextual styles to change their overall look as desired.
This video takes a quick look at using progress bars. With the bars, we can set their complete % using the item's width, and we look at how that is set, along with how we can change the location of the text and the different styles for display of the bars.
This video takes a real quick look at Alerts. Alerts can be used to give a user feedback, or to call attention to some content. We'll show how to style using contextual alert styles and also show how to set up the alerts to be dismissed by the user.
In this video, we take a good look at most of the things we can do with navbars, and how they affect the overall layout of the page and interaction with the page content.
Remember, the color is not covered in this video, use the "Less Configurator" video to address how to change default colors if you don't know how to use LESS/SASS and CSS.
We'll look at how we set up the compressed navbar as well as how we can change the location, default style, and fixed or unfixed positions on the page. In addition, we'll talk about adding dropdowns, forms, buttons, and text to the navbar. We'll cover the classes needed to create the navigational tools and set up our system to browse to a bunch of different pages. We'll also address some style issues with static/fixed navbars.
One thing to note is that in the video, I copied a text block for a style but was missing the quote (") on the end of the style, so my style got screwed up. I also mentioned that you can adjust the height based on device size to respond accordingly and not overwrite page content (on fixed top/bottom bars). Because of this, I've included finished versions of the music and content pages so you can see in more detail the fixed quote error as well as handing different size devices for not overwriting content.
Finally, make sure you include the banner.png image in your images folder if you want that specific banner to show up on the portfolio page (or replace it with your own).
For the thumbnails, we build some classic thumbnails for displaying our products and some dressed-up thumbnails for displaying our product with some small details.
Put the images into the images folder, which should be directly below your root folder where you extract the pages.
In this video, we discuss a couple of ways to add a jumbotron hero element to the page, as well as take a look at adding a page header to a page. The "site" is coming together a bit as well, so I added some thumbnails on the portfolio page and left some room for you to adjust the styles further, as well as added a form on the contact us page to help us review some of the things we've already learned.
In this video, we cover using the media class on our Bootstrap pages. These classes are really nice when you want to build forum-like threads or feeds that can have nested items, and can have images to associate (like a twitter feed or a forum with avatars). We also look at using the media item in a list with the media-list class.
//have to toggle the tooltips on to make it work
//have to toggle the popover on to make it work
We'll take a look at the elements that have tooltips and show how to position the tip as well as add the content text. Then we'll do the same for a button group with some small popovers.
In this video we take a look at setting up Modal Dialogs. We'll look at three different ways to style the overall dialog and how we can wire them up to be toggled by buttons.
In this video, we take a look at using Scrollspy to respond to scrolling on our pages. This is a great way to build, and is a perfect time to cover a single page application layout. By spying on the navbar, we can have the page scroll to any section and the navbar will respond. Additionally, we can direct our navbar links to any section of the document, thereby giving us great control over the content sections for an SPA.
Please read the attached document for some extra thoughts about this advanced section.
In this video, we download and install Node JS and make sure that it is up and running as expected after the install.
You can easily create your own file, or used the attached script file. Please note, I cannot upload a .js file for obvious reasons. Therefore, I've changed the extension to text. You'll need to change it back to .js to use this particular file in Node.
In this video, we get Grunt up and running on our machine. Use the attached file as a reference for the Gruntfile. Once again, to use the file directly, just change the extension to .js from .txt.
Make sure you follow the steps in order to ensure that you are getting the environment correctly configured to run Grunt.
In this video, we start with the first of four parts where we'll be configuring Grunt to do some awesome automation behind the scenes. This will help us in all of our web development going forward, but will also help us to rebuild bootstrap when we want to make some changes.
Specifically, in this first part, we take a look at installing grunt-contrib-less and grunt-contrib-watch. We'll configure our grunt file so that when we make changes to any of our *.less files the system will automatically create a new css file with the compiled less code.
To get started with this video, grab the starter pack and set up a directory on your computer for a new node project with those files in place. Follow along to make the changes. If you want to just see the end result, grab the final file and use that.
In this video, we continue where we left off with the Grunt configuration. Specifically, in this video we'll add in grunt-contrib-cssmin to automatically compile our css files together into one minified file for production release. Start with the part1 final file or just grab the part 2 final file to try this on your machine.
In this video, we'll finish up our configuration with the LiveReload add-in for Chrome. If you're not using Chrome, you may need to do some research to find an alternative plugin and also find how to wire it in for your system in the gruntfile.
In order to see this in action, we do have to serve our page from a live webserver, so I've set this project up on my IIS in windows. Any webserver should do (you might even be able to host it up in node.js if you know how to do that). Essentially, the real power of all of this comes into play as we make some changes and watch them automagically propagate to our minified files and ultimately watch the changes to our less files show up immediately in our browser!
Grab the part 3 final file to get started or use the part 4 final file to see the completed project.
Please plan on taking around 30 minutes or more for this video. Even though the video is shorter, there are numerous times where we have to do installs and builds, and those are not included in this video (I pause the video while they are taking place). Also, there is a lot of configuration that has to take place, so get the starterpack and work along. The finished product is also included, so you can fall back to that if something goes wrong.
Please use the attached pdf to help you along the way as well. The PDF will follow with what was going on in the video as well.
In this video, we change our target directory just a bit so that we can easily build in once place and run from another. If you want to combine the two, you could try to modify a grunt file to do so, and get it working so that you won't have to move the compiled CSS file to see the changes happen in the browser. You could also look into adding grunt-contrib-copy and setting up a copy task to move the files from the compiled directory to the destination webserver directory. Once again, please use the files attached as well as the PDF file to help you follow along with the video. If something is going terribly wrong for you, use the fallback for the finished files to make sure that your files are setup as expected.
This is perhaps one of the most important topics we'll cover in our course. In this video, we'll see how we can create our own styles to leverage the bootstrap columns and rows. By doing this, we can decouple our pages from bootstrap, so any changes made to bootstrap can be easily fixed in one single file, rebuilt, and deployed without having to touch any of our html/web pages. This is highly important from a maintenance standpoint, but also has another added benefit.
HTML 5 is supposed to be semantic. By that, I mean that each page we write should have code that is easy to read and means what it says. For example, the header is for the page or section header. The footer is for the page or section footer, etc. The section is a group of content. An article is part of a section, and an aside is related content that could be removed without the article suffering. That being said, to this point we've been writing <div class="something"> and have created a ton of nested divs that are not semantic.
By creating our own styles that override how article, section, header, aside, footer, nav, etc are handled, we can thereby return to writing good, semantic html that does not rely explicitly on Bootstrap to layout the columns. While Bootstrap drives the layout, our LESS styles will actually build the columns using column mixins and allow for us to correctly generate the layout and only have a need to update our LESS files should anything change at Bootstrap.
In this video, we cover setting up animations, and using the LESS mixin to easily set animation details. All the coding is done before we start, so feel free to mess around with some of the animations afterwards or add your own to try some of the other specific mixins that aren't covered.
In this video we take a look at setting up transitions for things to happen based on user action, such as hovering on a div resizes it. We'll also look at how we can use the Bootstrap Transitions to make the code a bit more streamlined.
In this video, we go over using CSS transformations and take a look at some of the mixins that are available within Bootstrap to enhance our use of CSS transformations.
In this video, we go over using gradients on our pages, with the ability to use more Bootstrap mixins for a couple of easily produced gradients. In the end, however, we may find that when it comes to really styling our pages, we may be better off just using regular CSS3, as we can see it is fairly straight forward to build gradients and use them on our bootstrap pages.
In this video, we conclude our look at the CSS Mixins and advanced use of LESS with Bootstrap. We finish up by taking a look at some other layout items, including Opacity, Drop Shadows, Centering, and Sizing. In the end, we again see a couple of items that continue to work better with our own use of CSS instead of relying on the mixins, and we see a few more ways we can add depth and style to our themes.
This is our course wrap up. We cover what we covered, and at the end I point to a couple of resources that you should look into if you don't already know about them.
As mentioned in the video, I hope you had a great experience with the course, and I'd love for you to provide a rating and feedback. Also, please feel free to post links to your work if you want to share with the rest of the class.
Thanks again, and all the best to you all!
This is a bonus lecture and has nothing to do with the course.
I am an experienced .Net developer, previously certified as an MCSD .Net in C#.net [expired]. I have a masters of science degree in computer information systems, and a bachelor of science degree in computer science. I also have many years of experience instructing college courses online in SQL databases, C#/VB .Net programming, Java programming, and Microsoft Office. I have created many online technical training courses that can be found on various platforms like O'Reilly/InfiniteSkills, Udemy, and others. I also run MajorGuidanceSolutions, a training and consulting company ,while working fulltime as a .Net developer.