How to do it…

One of the most popular frontend libraries for the design of websites and web applications, is Bootstrap, which has been available since August 2011; it's about seven years old. It has included responsive design handling since version 2. Mobile First Design (so you should first get your design to work in smaller devices, and only afterwards worry about adding handling for larger screens) was included in version 3, and SASS support appeared in version 4. Apart from responsive design support, Bootstrap also offers other features, such as components, typography, and more utilities, so you should probably not miss checking the whole documentation at https://getbootstrap.com/docs/4.1/getting-started/introduction/.

Bootstrap is currently GitHub's second most starred project, following FreeCodeCamp's first place. And if you wonder, React is practically tied at third place with another framework, Vue, and with EBook's Foundation set of free programming books. You can check the results by yourself at https://github.com/search?o=desc&q=stars%3A%3E1&s=stars&type=Repositories.

To install Bootstrap, we just need the usual npm command:

npm install bootstrap --save
You can save your work by downloading pre-build images, both for CSS and JS; see https://getbootstrap.com/docs/4.1/getting-started/download/ for those options. Alternatively, there exists a React package at https://react-bootstrap.github.io/, react-bootstrap, which today only supports Bootstrap version 3, but promises forthcoming full support for Bootstrap version 4. Yet another possible option you may want to look into is reactstrap, at https://reactstrap.github.io/.

Bootstrap provides lots of features, including:

In any case, we won't be specifically dealing with the preceding list, since it's basically just a matter of styling, and we've already done that. We are going to focus, instead, on positioning elements, changing their sizes, and even hiding or showing them according to the current screen size; let's move on to that now.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset