Book Image

Web Development with Bootstrap 4 and Angular 2 - Second Edition

By : Sergey Akopkokhyants, Stephen Radford
Book Image

Web Development with Bootstrap 4 and Angular 2 - Second Edition

By: Sergey Akopkokhyants, Stephen Radford

Overview of this book

<p>Two of the most popular frontend frameworks, Angular and Bootstrap, have undergone a major overhaul to embrace emerging web technologies so that developers can build cutting-edge web applications.</p> <p>Inside this title you'll dive, fingers first, into the basics of both the tools, and once you're familiar with them, you'll move onto Bootstrap's new grid system and Angular's built-in directives. You'll then learn how to format output using Angular's pipes and how to make use of the built-in router to set up routes for all your components.</p> <p>Webpack will be your buddy to wrap up your project. Then, after throwing in some SASS to make things pretty, you'll learn how to validate the forms you've built and debug your application. Finally, you'll go on to learn how to obtain smooth transitioning from Bootstrap to Angular and then how to hook up with a server and use Firebase as the persistence layer.</p> <p>Once you're done with this book, you'll not only have a lovely little e-commerce application running, but you'll also take with you the confidence to innovate and build your own applications with ease.</p>
Table of Contents (16 chapters)
Web Development with Bootstrap 4 and Angular 2 - Second Edition
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Using images


In our markup I used images, so pay attention to the img-fluid class which opts the image into responsive behavior:

<img class="img-fluid center-block product-item"  
     src="http://placehold.it/270x171" alt=""> 

The logic behind the class will never allow the image to become larger than the parent element. At the same time, it adds lightweight styles management via classes. You can easily design the shape of the picture as follow:

  • Rounded it with img-rounded class. The border radius is 0.3rem
  • Circle it with the help of img-circle, so the border radius became to 50%
  • Transform it with img-thumbnail

In our example, the center-block centered the image, but you can align it with helper float or text alignment classes:

  • The class pull-sm-left floats left on small or wider devices
  • The class pull-lg-right floats right on large and bigger devices
  • The class pull-xs-none prevents floating on all viewport sizes

Note

You can find the source code in the chapter_2/2.ecommerce-grid...