I. Abiyasa Suhardi
1 min readDec 30, 2017

--

Thanks for writing detailed step-by-step and example codes.

I’m familiar with Bootstrap 3 and now start switching to v4. I really love your focus on Bootstrap’s flexbox layout, which imo, the biggest difference between v3 and v4. You did a great job introducing the container and grid system, better than the original documentation 👍

A lot of time, I write Bootstrap 4 code with v3 in mind, not aware of its flexbox layout. I‘m still working on this 🙂

I have a question regarding using SVG image on pricing section: is there any reason not to use text instead of SVG image? I find it strange since you mention that the pricing table is the important part of the page but yet you use image to display the prices and without alt text.

Can’t we use span text instead?

<div class=”col-12 col-md-4 px-2 my-4 text-center”>
<h6 class=”text-black-40 text-uppercase”>
Corporate
</h6>
<p class=”price-label my-4"/>$9/mo</p>
<p>Unlimited super powers</p>
...
</div>
  • We could style price-label class to use different typography style
  • You can easily change the price without having to re-generate SVG image. For example, the server can change the price and currency based on the user’s country.
  • While writing the code, you can easily see the price (prevent developer mistake on attaching the wrong image)
  • Better accessibility, SEO, and screen-reader support

Thanks again!

--

--

I. Abiyasa Suhardi

Frontend engineer at @eBay, Co-founder of twindly (http://twindly.com ). Love travelling, food, & sketching. Currently living in Berlin