Instructor Lead On-Demand Learning Courses - August Big $10 Sitewide Extravaganza All Pro Web Designs and Udemy are happy to offer this special to you, good only on dates: 08/21-08/31 Act Now!

How to Get Started with Material Design for Bootstrap

This article was sponsored by MDBootstrap. Thank you for supporting the partners who make SitePoint possible.

As a SitePoint reader, you’re undoubtedly interested in creating bleeding-edge, sophisticated web sites and applications. You may not write everything from scratch, but you want a deep understanding of the code. You need nothing more than a text editor to build your next award-winning masterpiece.

Unfortunately, working life isn’t always so simple. You could be taking your first steps toward becoming a web development ninja. Your boss may want something completed within hours rather than days. Your client could be at the lower end of the budgetary spectrum. You need something practical developed quickly and painlessly within a few hours.

Many would consider a CMS such as WordPress. It’s a good option but it can be overkill and take too much time. Novice coders may be daunted by hosting requirements, PHP set-ups, MySQL database creation and the WordPress ecosystem. Even if your initial installation goes smoothly, you need to locate, install, configure and use appropriate themes and plugins.

Enter the MDBootstrap UI Kit

Fortunately, there is an easier alternative. Material Design for Bootstrap (mdbootstrap.com) provides a set of slick, responsive page templates, layouts, components and widgets to rapidly build web pages. There’s no complication or fuss: you just copy and paste code into one or more HTML files. It’ll help if you have a basic understanding of client-side web development but even those with a rudimentary knowledge of HTML can build an attractive page within minutes.

Instructor Lead On-Demand Learning Courses - August Big $10 Sitewide Extravaganza All Pro Web Designs and Udemy are happy to offer this special to you, good only on dates: 08/21-08/31 Act Now!

The free edition has more than 400 components to choose from. The commercial PRO edition contains more than 2,000 components with additional templates, tutorials, tools, and support. Both editions come in jQuery, Angular 4, or React flavors so you can select the most appropriate framework (if in doubt, stick with jQuery, which has a shallower learning curve and legacy browser support). If necessary, your resulting page templates can be imported into WordPress so your client can add and update content.

Install MDBootstrap by downloading and extracting the ZIP file to an appropriate location on your PC. You can use any folder since most pages will open in a browser directly from your file system. That said, I’d recommend you place them in a web server folder — especially if you intend to use JavaScript-powered components. If you don’t have a server installed, a quick option is http-server for Node.js (which exposes the current folder as a web root) or an all-in-one package such as XAMPP. Alternatively, you may be able to upload the files to your web host and edit there using a compatible editor such as codeanywhere.

Your First MDBootstrap Page

Open index.html in your web browser and you’ll see a home page with a welcome message:

Now open index.html in your text editor or IDE of choice (perhaps the fabulous and free VS Code or Atom). Delete the lines of HTML between:


and


then replace them with:

Welcome

This is my first MDBootstrap page.

The code defines a container which provides a margin and responds to the browser width. It contains a title and paragraph:

your first page

Copying HTML and CSS

You’re now ready to insert your own components. Head over to mdbootstrap.com and click the menu icon at the top-left of the page. A long list of categorized components can be selected.

Most components require you to insert HTML into your page. Some also require additional CSS styles which should be copied and pasted into the (initially empty) css/style.css file. A link to this stylesheet is already provided in the HTML :


Creating an Advanced Layout

The following sections describe how to create a more advanced page:

advanced page

Make sure you revert back to an empty page by removing the code between:


and


Add Navigation

The MDBootstrap Layout / Navigation provides a variety of options which collapse to hamburger menus when space is limited. The Regular Fixed Navbar HTML can be copied into the page immediately after .

I’ve added a couple of tweaks:

  1. bg-pink in the nav class has been changed to bg-blue, and
  2. the Navbar title has been changed to My Site.

The result:

navigation menu

Add a Carousel

I’m not a big fan of carousels but clients usually love them. The MDBootstrap JavaScript / Carousel provides numerous options but we’ll use the Basic Example by pasting the HTML immediately after the navigation menu:




It’s a lot of code but don’t be afraid to change the image src attributes, h3 titles and p paragraph text. You can also add or remove

blocks as necessary.

Save and refresh your page in the browser:

carousel

Adding Page Content

Our page now requires content. It’s best to place content components within a container so there’s a margin to the browser viewport:

Add a Feature Section to the Page Content

MDBootstrap’s Sections / Features is a good starting point because it describes the essential aspects of a product or service. Copy the Features v.1 code within the container

added above:

Continue reading %How to Get Started with Material Design for Bootstrap%

See more about How to Get Started with Material Design for Bootstrap

Instructor Lead On-Demand Learning Courses - August Big $10 Sitewide Extravaganza All Pro Web Designs and Udemy are happy to offer this special to you, good only on dates: 08/21-08/31 Act Now!

Leave a Reply