Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag Germany
Country selected
country flag Slovakia
Country selected
country flag Canada
Country selected
country flag Brazil
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag Norway
Country selected
country flag Chile
Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Spain
Country selected
country flag South Korea
Country selected
country flag Ecuador
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Switzerland
Country selected
country flag Indonesia
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag New Zealand
Country selected
country flag Austria
Country selected
country flag Turkey
Country selected
country flag France
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Malaysia
Country selected
country flag South Africa
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag Australia
Country selected
country flag Japan
Country selected
country flag Russia
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Bootstrap 4 ??? Responsive Web Design

You're reading from   Bootstrap 4 ??? Responsive Web Design A step-by-step practical course enabling you to nail Bootstrap and make your web designs responsive.

Arrow left icon
Product type Course
Published in Jul 2017
Publisher Packt
ISBN-13 9781788397315
Length 810 pages
Edition 1st Edition
Languages
Tools
Concepts
Arrow right icon
Authors (4):
Arrow left icon
Matt Lambert Matt Lambert
Author Profile Icon Matt Lambert
Matt Lambert
Matt Lambert is a designer and developer with 15+ years of experience. He currently works full-time as a Senior Software Engineer for CA Technologies in Vancouver, BC, Canada. In his free time he is an author, artist, and musician. In 2005, Matt founded Cardeo Creative, which is a small web design studio based in Vancouver. He works with a select list of clients on a part-time basis while producing his own products on the side. To date, Matt has self-published 3 additional development books titled: Mastering Bootstrap, CSS3 Handbook, and the Freelance Startup Guide.
Read more
See other products by Matt Lambert
Benjamin Jakobus Benjamin Jakobus
Author Profile Icon Benjamin Jakobus
Benjamin Jakobus
Benjamin Jakobus graduated with a BSc in Computer Science from University College Cork and obtained an MSc in Advanced Computing from Imperial College London. As a software engineer, he has worked on various web-development projects across Europe and Brazil.
Read more
See other products by Benjamin Jakobus
Silvio Moreto Silvio Moreto
Author Profile Icon Silvio Moreto
Silvio Moreto
Silvio Moreto Pereira is a developer within more than 7 years of experience with front-end technologies which have created many web sites and web applications using the Bootstrap framework from simple pages up to complex ones, always using the Bootstrap framework.nnSilvio is also the creator of the bootstrap-select plugin ( http://silviomoreto.github.io/bootstrap-select/ ), which is a very popular plugin among the community, to replaces a select element into a Bootstrap button dropdown element. He foresaw that a plugin like that was missing in the original framework, and could be useful for the community. He created the plugin and the community helps him on maintaining the plugin.nnBesides that, he is very engaged in the open source community, participating of some open source repositories and issues communities, such as Stack Overflow. Also, he has finish in third place in the world wide django-dash 2013 challenge.nnAcknowledgements:nnFirst, I would like to thank my wife to supporting me through the writing process of the book. I would like to thank my dog for staying beside me every night when I was writing and be the inspiration to scenarios in the book. Also wants to thank to the editors from PACKT from understanding and guiding me through the completion of the book.
Read more
See other products by Silvio Moreto
Jason Marah Jason Marah
Author Profile Icon Jason Marah
Jason Marah
Jason Marah is a software engineer who is currently developing AerLingus.com in Dublin, Ireland, as a lead UI developer. Jason is a University College Cork alumnus, graduating with a BSc in Computer Science. Jason has worked as a full-stack engineer specializing in JavaScript around Europe on various projects.
Read more
See other products by Jason Marah
Arrow right icon
View More author details
Toc

Table of Contents (6) Chapters Close

Preface 1. Module 1 2. Module 2 FREE CHAPTER 3. Module 3 Bibliography
Index

Chapter 2. Making a Style Statement

In the previous chapter, we showed you a first glimpse of MyPhoto, the Bootstrap website that we are going to build up throughout the following chapters. Now it is time to get our hands dirty, and actually start building the first section of this website. A first pass at an element of the Services section that presents the list of print sizes available to order. We will achieve this by building a grid using Bootstrap's grid system, creating image elements within the grid system, applying image modifiers, and leveraging Bootstrap's utility classes to create visual indicators and optimized layouts specific to different display resolutions.

By the end of this chapter, through code examples and studying the Bootstrap source code, you will have gained a deep understanding of the following:

  • Bootstrap's grid system
  • Responsive images within Bootstrap
  • Bootstrap's helper classes
  • Bootstrap's responsive utilities

The grid system

Bootstrap...

lock icon The rest of the chapter is locked
arrow left Previous Section
Section 3 of 10
Next Section arrow right
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Sign up now
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Start free trial
Renews at $19.99/month. Cancel anytime

Authors (4)

Left arrow icon
Profile icon Jason Marah
Jason Marah
Jason Marah is a software engineer who is currently developing AerLingus.com in Dublin, Ireland, as a lead UI developer. Jason is a University College Cork alumnus, graduating with a BSc in Computer Science. Jason has worked as a full-stack engineer specializing in JavaScript around Europe on various projects.
Read more
See other products by Jason Marah
Profile icon Benjamin Jakobus
Benjamin Jakobus
Benjamin Jakobus graduated with a BSc in Computer Science from University College Cork and obtained an MSc in Advanced Computing from Imperial College London. As a software engineer, he has worked on various web-development projects across Europe and Brazil.
Read more
See other products by Benjamin Jakobus
Profile icon Matt Lambert
Matt Lambert
Matt Lambert is a designer and developer with 15+ years of experience. He currently works full-time as a Senior Software Engineer for CA Technologies in Vancouver, BC, Canada. In his free time he is an author, artist, and musician. In 2005, Matt founded Cardeo Creative, which is a small web design studio based in Vancouver. He works with a select list of clients on a part-time basis while producing his own products on the side. To date, Matt has self-published 3 additional development books titled: Mastering Bootstrap, CSS3 Handbook, and the Freelance Startup Guide.
Read more
See other products by Matt Lambert
Profile icon Silvio Moreto
Silvio Moreto
Silvio Moreto Pereira is a developer within more than 7 years of experience with front-end technologies which have created many web sites and web applications using the Bootstrap framework from simple pages up to complex ones, always using the Bootstrap framework. Silvio is also the creator of the bootstrap-select plugin ( http://silviomoreto.github.io/bootstrap-select/ ), which is a very popular plugin among the community, to replaces a select element into a Bootstrap button dropdown element. He foresaw that a plugin like that was missing in the original framework, and could be useful for the community. He created the plugin and the community helps him on maintaining the plugin. Besides that, he is very engaged in the open source community, participating of some open source repositories and issues communities, such as Stack Overflow. Also, he has finish in third place in the world wide django-dash 2013 challenge. Acknowledgements: First, I would like to thank my wife to supporting me through the writing process of the book. I would like to thank my dog for staying beside me every night when I was writing and be the inspiration to scenarios in the book. Also wants to thank to the editors from PACKT from understanding and guiding me through the completion of the book.
Read more
See other products by Silvio Moreto
Right arrow icon
Banner background image

Personalised recommendations for you

Based on your interests and search pattern
Left arrow icon
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Right arrow icon