{"id":2356,"date":"2020-10-12T03:37:44","date_gmt":"2020-10-12T07:37:44","guid":{"rendered":"https:\/\/endlesshybrids.com\/?p=2356"},"modified":"2020-10-12T03:37:44","modified_gmt":"2020-10-12T07:37:44","slug":"introduction-to-bootstrap-4","status":"publish","type":"post","link":"https:\/\/endlesshybrids.com\/web-development\/introduction-to-bootstrap-4\/","title":{"rendered":"Introduction to Bootstrap 4"},"content":{"rendered":"\n

Using Bootstrap<\/h2>\n\n\n\n

The current version of Bootstrap is 4.5; new versions come out regularly. When you’re looking at documentation on the web to figure out how to do something in Bootstrap, be sure to note the version number. Version 4 is very different from version 3. So, a lot of older advice about Bootstrap can lead you in the wrong direction. <\/p>\n\n\n\n

Let’s walkthrough a page created with Bootstrap 4. First, here’s the plain page without any Bootstrap code:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It’s quite boring: some links at the top, a full-width image, and a paragraph of text. <\/p>\n\n\n\n

Here’s the same page with Bootstrap:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Notice the navbar is looking nicer, and the paragraph is well formatted. Plus, this file also uses the free Font Awesome<\/a> to add in those iconic links to GitHub, Twitter, and LinkedIn. <\/p>\n\n\n\n

Before we take a close look at how Bootstrap works, here’s my own web page<\/a> using this same code:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

On my site, I opted not to use a navbar. I actually have a lot of different web sites, so I wanted my personal branded page to be minimal and distinguished by a unique image. <\/p>\n\n\n\n

This code is freely available in case you want to use it for your own site. See the code repository at https:\/\/github.com\/jeffreybarry\/bootstrap-hero<\/a> and a live version of the site: https:\/\/jeffreybarry.github.io\/bootstrap-hero\/bd-hero.html <\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

Code Walkthrough<\/h2>\n\n\n\n

Let’s take a look at what’s happening. <\/p>\n\n\n\n

\n