Introducing our demo project with Bootstrap

This book will teach you how to build a complete Bootstrap website from scratch. Starting with a simple layout in chapter 2, Making a Style Statement, and chapter 3, Building the Layout, we will build and improve the website’s various sections as we progress through each chapter. The concept behind our website is simple—to develop [ [ ...]

04
Feb
What Bootstrap 4 has to offer

Much has changed since Twitter’s Bootstrap was first released on August 19th, 2011. In essence, the first version of Bootstrap was a collection of CSS rules offering developers the ability to lay out their website, create forms, buttons, and help with general appearance and site navigation. With respect to these core features, Bootstrap 4 is [ [ ...]

04
Feb
Setting up our project with Bootstrap

Now that we know what Bootstrap has to offer, let’s set up our project: Create a new project directory named MyPhoto. This will become our project root directory. Create a blank html file and insert the following HTML code: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial- scale=1, shrink-to-fit=no”> <meta http-equiv=”x-ua-compatible” content=”ie=edge”> [ [ ...]

04
Feb
Making a Style Statement with Bootstrap: The grid system Containers

Bootstrap’s grid system is arguably its most impressive and most commonly used feature, as it solves the important task of horizontal and vertical positioning of a page’s contents, allowing the contents to be structured across multiple display widths. Therefore, mastering this core functionality is essential for any Bootstrap developer. As already noted in chapter 1, [ [ ...]

04
Feb
Making a Style Statement with Bootstrap: The grid system – Rows and Columns

1. Rows A row is used to define a selection of elements that should be dealt with as a horizontal group. As such, rows reside within a container element. The power of the row lies in being able to stack content vertically, almost like containers within a container, or defining a section of the page. [ [ ...]

04
Feb
Making a Style Statement with Bootstrap: Image elements

  Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised [ ...]

04
Feb
Making a Style Statement with Bootstrap: Responsive utilities

Responsive utilities are a group of media query-based classes that control when an element should be hidden or shown depending on the viewport. One popular use case for this is controlling display-specific navigation. For example, a page may have a navigation bar on large displays and a hidden navigation on small displays, which is only [ [ ...]

04
Feb
Building the Layout with Bootstrap: Creating sections

The MyPhoto web page will consist of five separate sections: Welcome, Services, Gallery, About, and Contact Us. Each of these sections will form one distinct container. This will allow us to treat each section as a standalone component on the page. As we want each container to take up 100% of the available horizontal space, [ [ ...]

04
Feb
Adding Bootstrap components: Jumbotron

  MyPhoto is looking pretty bare right now, so let’s take a look at integrating some Bootstrap components into our sections. First, ensure that as per the setup instructions in Chapter 1, Revving up Bootstrap, you have added Bootstrap’s JavaScript library and its dependency, jQuery: <script src=”node_modules/jquery/dist/jquery.min.js”></script> <script src=”node_modules/bootstrap/dist/js/bootstrap.min.js”> </script> 1. Jumbotron The first component [ [ ...]

04
Feb
Adding Bootstrap components: Tabs

MyPhoto offers a trio of services. We built the UI for one of these: the Print service, in chapter 2, Making a Style Statement. The UI displayed the prices for various print sizes. Obviously, we will want to integrate the Print service into the Services section of the MyPhoto page. We also need to include [ [ ...]

04
Feb
Adding Bootstrap components: Carousel

To exhibit the photographic wares, we need a gallery. To implement the gallery feature, we will integrate Bootstrap’s carousel component. The carousel acts as a slideshow, with a list of nested elements as the slides. Let’s add a carousel, with three slides, to the Gallery section: <div class=”container-fluid myphoto-section bg-myphoto-light”> <div class=”container”> <h3>Gallery</h3> <div id=”gallery-carousel” [ [ ...]

04
Feb
Adding Bootstrap components: Cards

The final section we will look at in this chapter is the About section. Here, we will use Bootstrap’s card component to highlight our MyPhoto marketing blurb. Take a look at the following code: <div class=”container-fluid myphoto-section bg-myphoto-dark”> <div class=”container”> <div class=”row”> <h3>About</h3> <div class=”card bg-myphoto-light”> <div class=”card-body”> <p> The style of photography will be [ [ ...]

04
Feb
Adding Bootstrap components: Navbar

Bootstrap’s navbar is a powerful, responsive component to provide sensible navigation around a website. Before getting into the details, let’s add the navbar to the top of our page (right below the body tag) and see what happens: <nav class=”navbar navbar-expand navbar-light”> <a class=”navbar-brand” href=”#”>MyPhoto</a> <div class=”collapse navbar-collapse”> <ul class=”navbar-nav mr-auto”> <li class=”nav-item”> <a class=”nav-link” [ [ ...]

04
Feb
Adding Bootstrap components: Modals

Bootstrap makes surfacing modal windows extraordinarily simple. It is simply a case of creating the modal markup, using Bootstrap’s modal classes, and using HTML attributes, data-toggle, data-target, and data-dismiss, to surface and remove the modal. What is a modal window? A modal window in web development is an element that is layered on top of [ [ ...]

04
Feb
Fixating the navbar in Bootstrap

Our website already looks pretty decent. We have a navigation bar in place, a footer placeholder, and various sections populated with some sample content. However, we are not quite there yet. The website’s overall user experience is still a bit edgy and does not yet feel very refined. Take navigation, for instance—while clicking on a [ [ ...]

05
Feb
Improving navigation using Scrollspy in Bootstrap

Now that we have fixated the navbar at the top of the page, it will no longer disappear as the user scrolls down the page. However, now we are faced with a new problem. As the user clicks on a navbar item, they have no way of telling which section of the site they are [ [ ...]

05
Feb
Breadcrumbs in Bootstrap

Now that we improved our navigation bar, we can expand the range of available content on our site. Although we won’t add more content as part of our demo website, we should consider how we can help the user navigate sets of nested pages without getting lost. To this end, Bootstrap allows us to easily [ [ ...]

05
Feb
Icons in Bootstrap

The customization of our MyPhoto navbar is coming along nicely. We now have a nice scroll animation in place as well as a set of navbar items that update themselves based on the user’s scroll position. However, we are not quite there yet. The items in our Profile drop­down menu still look quite plain. Wouldn’t [ [ ...]

05
Feb
Creating a footer in Bootstrap

At the moment, MyPhoto only contains a placeholder in place of a useful footer. Before MyPhoto goes live, it will desperately need a footer that should contain at least three pieces of information: A copyright notice A link to your website’s terms and conditions A link to your website’s About section Let’s go ahead and [ [ ...]

05
Feb
Creating and customizing forms in Bootstrap

At last, we are ready to move on to the final part of our landing page, the Contact Us form. Note that we will not be writing any of the actual JavaScript that transfers the contents of the form to the server. Instead, we will learn how to use Bootstrap to lay out our form [ [ ...]

05
Feb