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 customised to your personal preference, as if being shot from your own eyes. You will be part of every step of the photography process, to ensure these photos feel like your own.
</p>
<p>
Our excellent photographers have many years of experience, capturing moments from weddings to sporting events of absolute quality.
</p>
<p>
MyPhoto also provides superb printing options of all shapes and sizes, on any canvas, in any form. From large canvas prints to personalised photo albums,
MyPhoto provides it all.
</p>
<p>
MyPhoto provides a full, holistic solution for all your photography needs.
</p>
</div>
</div>
</div>
</div>
</div>
Now consider the screenshot in figure 3.11:
Figure 3.11: Using Bootstrap cards to display About information (example10.html)
There isn’t much to say about cards. The card class gives an impression of an element being inset, to draw the eye of the user and to provide a visual cue of relatively important content. It achieves this effect by the following:
- Giving the element a 1 px border, along with a 0.25 rem border-radius to which it is applied
- Adjusting the element’s bottom margin, forcing some space between the card element and any subsequent elements
- Ensuring that the element’s position is relative and making the element behave as a block-level element (that is, forcing the element onto a row of its own)
Along with a card, we use card-body to provide larger padding around the content area. The card is as effective as it is simple and complements the content nicely. A card’s content can be styled using the card-text, card-title, and card-subtitle classes:
<div class=”card bg-myphoto-light”>
<div class=”card-body”>
<h5 class=”card-title”>About us</h5>
<h6 class=”card-subtitle mb-2 text-muted”>
Learn more about our website
</h6>
<p class=”card-text”>
The style of photography will be customised to your personal preference, as if being shot from your own eyes. You will be part of every step of the photography process, to ensure these photos feel like your own.
</p>
</div>
</div>
Furthermore, the card-link class can be used to style links contained inside the card- body, while an image can be above the card title using the card-img-top class:
<div class=”card”>
<img class=”card-img-top” src=”some-image.png”>
<div class=”card-body”>
<h4 class=”card-title”>About us</h4>
…
</div>
</div>
Last but not least, cards can contain headers and footers:
<div class=”card”>
<div class=”card-header”>
The About Us Header </div>
<div class=”card-body”>
<h4 class=“card-title”>About us</h4>
…
</div>
<div class=”card-footer text-muted”>
Footer text
</div>
Cards in Bootstrap 3
Cards are a new concept introduced with Bootstrap 4. Prior to Bootstrap 4, cards did not exist. The feature replaced Bootstrap 3’s wells, thumbnails, and panels. To achieve a similar effect to the one demonstrated in Figure 3.10, we will use the well and well-lg classes:
<div class=”container-fluid myphoto-section bg- myphoto-
dark”>
<div class=”container”>
<div class=”row”>
<h3>About</h3>
<div class=”well well-lg bg-myphoto-light”>
<p>….</p>
<p>…</p>
</div>
</div>
</div>
</div>
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 edition.