In this chapter, we will cover the following topics:
In this chapter, we will take a look at the brand new Flexbox--enabled grid in Bootstrap. We will also look at practical examples of using the Flexbox grid and the ways in which this CSS specification allows us to make layouts in an alternative way, by stepping away from float-based layouts. By including Flexbox in its new version, Bootstrap 4 really brings a whole new way to build websites. We will look at some of the new approaches in this chapter.
In this recipe, we will ease into using the flexbox grid in Bootstrap 4 with a simple example of switching the flex-direction property. To achieve this effect, we will use a few helper classes to enable the use of Flexbox in our recipe. To get acquainted with the way Flexbox works in Bootstrap, check out the official documentation at https://v4-alpha.getbootstrap.com/utilities/flexbox/ .
To get started with the recipe, let's first get an idea of what we will make. Navigate to chapter8complete/app/ and run harp server. Then, preview the completed recipe at localhost:9000/recipe08-01. You should see a simple layout with four card components lined up horizontally.
Now, resize the browser, either by changing the browser's window width or by pressing F12 (which will open developer tools and allow you to narrow down the viewport by adjusting the size of developer tools). At a certain breakpoint (md, i.e. the medium...
In this recipe, we will look at the power of applying helper classes to flex containers in combination with using the Flexbox grid on the flex items, in order to create a fully responsive Flexbox grid of Bootstrap components. This grid is very versatile and allows us to create wonderful responsive designs on the fly. Bootstrap now delivers even more on its promise of the fast layout of web pages with the simple use of predefined classes in its HTML markup. In this recipe, we will see how easy it is to set up a Flexbox-enabled layout.
To get started with the recipe, we will first inspect a completed recipe. Navigate to chapter8complete/app/ and run harp server. Then, preview the completed recipe at localhost:9000/recipe08-02. You should see a simple layout with eight card components, lined up in rows as per the available screen size.
If you resize the browser, you will be able to see that the cards always take up...
In this recipe, we will see how to add an arbitrary number of columns with Flexbox. This means we no longer have to stick to the 12-column grid. This simple recipe will show the fundamental paradigm shift that the Flexbox model brings to front-end development.
Before you start with this recipe, preview the completed page by running the harp server command inside the chapter8/completed/app folder. To see the recipe itself, point your browser to localhost:9000/recipe08-03. Try resizing the browser to see the behavior of the completed Flexbox grid.
recipe08-03.ejs add the following code in it:<style>
.col {
flex-grow: 0;
}
</style>
<div class="container">
<h2 class="mt-5">Recipe 08-03: Adding Any Number of Columns with Flexbox</h2>
<p class="mt-4">In this recipe we will look at using the flexbox grid to create layouts that were not possible in earlier versions of...In this recipe, we will combine plain col classes with numbered col classes. This will allow us to create some wonderful combinations of columns that were previously not possible in Bootstrap. Even though this recipe is quite simple, having a firm understanding of these basic concepts will help us with more advanced recipes later in the chapter.
To begin the recipe, preview the completed one by navigating to chapter8/complete/app. Inside the folder, run the harp server commands from your console. Next, open the browser at localhost:9000/recipe08-04. You should see a row with three columns, a simple demonstration of important concepts we will discuss in this recipe.
In this recipe, we will make layouts using the cards component with the help of Bootstrap 4 Flexbox grid to align them and look at some new CSS properties that will make the use of images in our cards easier by retaining their proper aspect ratio and preventing image stretching. We will also look at using lorempixel.com to create more believable mock-ups of our layouts.
To begin, open the completed page in your browser by navigating to the chapter8/complete/app folder and running the harp server command through the console. Point your browser to the completed recipe by visiting localhost:9000/chapter08-05. Observe the changes in the layout of the cards, components on different viewport resolutions.
In this recipe, we will look at how we can center align cards' content. We will have varying amounts of content in cards inside the same row. We will see how easy it is to align this content with the use of Flexbox.
To get ready for this recipe, we will first preview the end result that we are trying to achieve. In your console, locate the chapter8/complete/app folder run the harp server command on it. Preview the completed recipe by visiting localhost:9000/recipe08-06 in your browser.
chapter8/start/app, search the file named recipe08-06.ejs and paste in the following code:<div class="container">
<h2 class="mt-5 pb-3">Recipe 08-06: Center-Aligning Cards on Wider Viewports Only</h2>
<p class="mt-4">In this recipe we will look at centering the card content with flexbox.</p>
</div>
<!-- /.container -->
<style>
.col {
min-width: 280px;
}
.card img...
© 2017 Packt Publishing Limited All Rights Reserved
