How to learn Bootstrap for Power Pages

Who doesn’t want to design websites {{< mark >}} faster, easier and better {{< /mark >}} in Power Pages. {.lead}

Bootstrap is the key for unlocking the full potential of Power Pages design, as it directly supports the framework. {.lead}

Wondering where to get started with Bootstrap? Well I wanted to share (in order) 4 ways I would learn the framework if I had to start again from scratch. {.lead}

[!NOTE] This blog assumes that your comfortable with basic HTML and CSS otherwise I would recommend learning this before considering Bootstrap.

What's Bootstrap

Bootstrap is a CSS framework that makes it easier to build responsive, professional websites. It was built at Twitter in 2010 and then released in 2011. Now Bootstrap is up to version 5 and is still widely used for designing websites including Power Pages sites.

{{< image src="https://res.cloudinary.com/dnpazhkyr/image/upload/v1742642728/getbootstrap.com_docs_5.2_examples_product__2_oal1dx.png" caption="This image is a screenshot from the Bootstrap example section, used for educational and illustrative purposes only. All rights belong to Bootstrap. Visit getbootstrap.com for more information." wrapper="col-12 mx-auto">}}

Whenever you add a component or styles in the Power Pages design studio if you look at the code behind it you should notice Bootstrap classes being used in the HTML. With this knowledge it should make it easier to understand what's going on and you will be in a better position to support and extend Power Pages.

1) Layouts

Learn how to structure a web page using Bootstrap containers, rows and columns. By learning the grid layout you can display a different user experiences for different devices such as laptops or mobile phones.

{{< image src="https://res.cloudinary.com/dnpazhkyr/image/upload/v1742847657/Bootstrap-grid_bt749o.png" caption="This image is a screenshot from the Bootstrap example grid section, used for educational and illustrative purposes only. All rights belong to Bootstrap. Visit getbootstrap.com for more information." wrapper="col-12 mx-auto">}}

Recreate the examples in the Bootstrap documentation and learn how breakpoints work by reducing the size of the browser window.

Let's not talk about catering designs for foldable phones 🥲

2) Essential components

The amount of components in the Bootstrap framework can be overwhelming at first, you can spend your time trying to learn them all but chances are that you won't even use at least half of them.

Instead these are the components I use in every website I build, everything else is extra.

{{< mark >}} Navbar (website menu), Buttons, Image and Forms. {{< /mark >}}

3) Take a course

By now I'm hoping you have had a play around with some of the Bootstrap examples before taking a course. Once you feel like somewhat comfortable with the above I would recommend watching Ray Villalobos LinkedIn Learning course on Bootstrap 5 essential training. He's an actual wizard and it's a great combination of theory and practical exercises.

If you're not so lucky to have access to Linkedin Learning there will be plenty of free Bootstrap courses on Youtube.

4) Just build something

The best way to learn is by building something yourself. It forces you to make mistakes and to learn from them.

Don’t rely on AI too soon - understand the problem first when you're starting out.

My first website built with Bootstrap was a clone of the Apple website and at the time and it took me ages to come up with something half decent. From this, I learned a lot from how to take a simple design and recreate it as a living website.

Now with Power Pages it's even easier to build a website with Bootstrap as you don't even to worry about hosting. Try and build a Power Pages site and extend the design by using Bootstrap. For instance, you could change the look and feel of a form or change the navbar (website menu) to be transparent.

---

Conclusion

There you have it, we covered the 4 ways I would learn Bootstrap again. If you take anything away from this just build something with Bootstrap and have fun. {.lead}

Power Pages seems to be pretty invested with Bootstrap so it's not going away anytime soon so by learning this framework you can take your web design skills to the next level. {.lead}

As always, thanks for reading and take it easy! {.lead}