Bootstrap 4 in 2018 - Free Crash Course of 4.0.0

This is a 100% free crash course on learning Bootstrap 4 here in 2018. Bootstrap 4 just came out of beta and it's finally released to version 4.0.0.

I'm going to show you how to integrate it with nodejs into a modern development workflow, as well as how to build a layout while demonstrating the core fundamentals.

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[samseabourn]

Please pin this Gary so it gets stuck to the top of the comments!

[ajjo]

It's brilliant that you've included a written tutorial as well. Written tutorials are pretty handy when you want to revise some concepts

[michaelnovello]

You can select a block (multiple lines) of code and press Shift+Alt+Down Arrow key to copy that entire block down while keeping the indentation levels intact. You can also press Shift+Tab to de-dent everything (either the line you are on, or multiple lines if you have them selected) instead of manually removing tabs one line at a time.

[Andrew-cinw]

Great tutorial
On Formatting: In VS Code if you press Shift-Alt-f it will reformat the code for you, fix the indentation, layout, etc. Saves a ton of time and means you won't have to keep adjusting the layout.

[chethankambi]

Just adding to my previous comment, if any of you are having issues using this tutorial... it is because the gulp version and gulpfile configurations have changed. Its gulp4.0 now. This tutorial uses older version of gulp. So, if you want to follow this tutorial just downgrade your gulp version and you should be able to follow this tutorial.

[HiFiSmith]

Copy-paste tip: option+shift down will take the select text and copy it below the selection. If there's no selection, it'll copy the line. There won't be extra spaces/tabs to left like what happened in the video in minute 19.

[johnniegilkerson]

@12:53 in video, I used all of your code and got:
gulp : The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the
spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ gulp
+ ~~~~
+ CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException

[TomWhoASMR]

Here are a few things I learned to make this work on a Mac, because I wasn't able to get this working at first.

First: In addition to gulp, you also need to install gulp-cli, a command=line interface for gulp. And it has to be installed globally, which means you must precede the install command with sudo like this: *sudo npm i -g gulp-cli*
You will first be prompted to enter your computer account password, then the install will start. *sudo* must be used for anything you install via npm that is to be global.

Second: Be sure that *gulpfile.js* is in the *PROJECT* folder (here called bs4), not the SRC folder! If gulp isn't working for you, that's probably why. If you put gulpfile.js in the wrong folder, you will see a "Cannot GET /" error in the browser window.

Hope that helps anyone who ran into the same problems I did.

[shanezhu]

This is super helpful and effective tutorial for a backend dev trying to survive in the frontend world :D

[piotao]

That is nice and dandy workflow for development. But the question unanswered in this tut is "how to deploy" the whole site to production server? Namely, how to get a simple, minimalistic and proper directory structure, filled with minimized and compacted files. Is there anything about this?

[JoakimTeixeira]

28:35 Quick fixes:
- Use "CTRL + SHIFT + P" and select "Reindent lines"
- Copy down the code with "SHIFT + ALT + Arrow down"
- Copy the code and paste with "CTRL + SHIFT + V"

[mihalisfthenos]

Great Vid. Haven't used bootstrap in a over a year and this crash course put me back into the workflow quick!

[mshtik]

You can use emmet abbreviation for pasting lorem ipsum text. Just type "lorem " and the number of words you want to paste. For example, typing "lorem5" and hitting the TAB or ENTER button will automatically paste "Lorem ipsum dolor sit amet." ;-)

[PedobearMishka]

This course uses gulp of version 3, that's why you can have some problems during run process (gulp 4 uses different syntax), this can solve your problem so you can use code featured in this video:

[rajyeswarbera]

Excellent tutorial. Thank you very much for introducing me to the world of Bootstrap.

[MenukaIshan]

Hey bro Vscode document formatter shortcuts are
MacOS: ⇧⌥F or Shift+Option+F
Linux: Ctrl+Shift+I
Windows: Shift+Alt+F
Then you don't need to press Shift + Tab all again
These are default ones You can change them if you want :D

[DerAltruist]

Great tutorial, I'm 4 minutes in and I have no idea wtf you're doing.

[Bene]

So I'm assuming you don't know that:

If you type
*li.nav-item*
and press Tab after that, it's going to change to
*<li class="nav-item"></li>*

It makes things to much easier, because it's way faster too type ;)

[pancon]

If gulp is not running, try

npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js

(as seen over at stackoverflow)

[noone-ghnr]

I work in Atom and you can fix indentation like that by hitting ctrl + shift + [

What I usually do though is tripple click so it highlights the whole row Im currently clicked on and drag to where I want to copy, then it saves the spacing and I just ctrl + v, enter, ctrl + v, enter, etc.