![]() The Grid StructureĮach grid is contained within a wrapping tag that Bootstrap refers to as the grid’s container. Multiple grids can be nested inside each other as needed. You can use Bootstrap grids to lay out parts of a page or a whole page. This is where Bootstrap’s layout grid can really save you a lot of time, energy, and frustration. Introducing Bootstrap Grid LayoutsĪs we learned back in instalments 8 & 9, manually creating robust page layouts with CSS involves quite a bit of effort. You’ll find my full sample solution in the folder named pbs56-challengeSolution in the ZIP file for this instalment or here on GitHub. Lastly, the challenge suggested making any other changes you thought were appropriate. Finally, I enabled the highlighting of the row being hovered over by adding the class table-hover to the tag. Purely on aesthetic grounds I chose to make the text in the entire table muted by adding the Bootstrap utility class text-muted to the tag. Next I chose to opt for a subtle background on the header by adding the class thead-light to the tag. I had been using the Bootstrap utility class h2 to style my heading, but once I’d opted into Bootstrap’s opinionated tables, that wasn’t necessary anymore, so I removed it. With the main body of the table now looking halfway decent, I turned my attention to the table heading. Since my table is floated and 25% wide, I decided to opt for the more compact table style by also adding the class table-sm. The first step is to opt the table into Bootstrap’s opinionated styles by adding the class table to the tag itself. The third task was to style the table of ingredients. The finished product fresh out of the oven! ![]() Opting the figure into Bootstrap’s styles involves adding the class figure to the tag, the class figure-img to the tag within the figure, and the class figure-caption to the tag: The second part was a little more challenging - opt the figure into Bootstrap’s more opinionated styling, and format it in a way that makes sense within your page. Bootstrap makes this very simple - just add the class img-fluid to the tag. ![]() That’s to say, make it shrink automatically when the viewport becomes smaller than the image. The first part of the challenge was to make the image in your recipe responsive. The challenge set at the end of the previous instalment involved continuing to improve the recipe we’ve been working on for the past few challenges. You can also Download the MP3 PBS 56 Challenge Solution Listen along to this instalment on episode 553 of the Chit Chat Across the Pond Podcast Your browser does not support HTML 5 audio □ You can download this instalment’s ZIP file here or here on GitHub. Once we can lay things out at one size, then we’ll add in responsiveness in the following instalment. In this instalment we’re going to confine ourselves to creating layouts that work on larger screen devices like desktops, laptops, and large tablets. Going from zero to responsive design would be a big leap, so we’re going to break it down into two distinct parts. For example, you can create a single layout that shows as a simple single column when viewed on a small phone screen, two columns on a tablet, and three on a device with a larger screen. Now we’re ready for our first look at layout.īootstrap’s layout functionality is designed from the ground up to be responsive, that is to say, to allow you to control the layout of a page differently depending on the size of the viewport. We started by looking at the utilities, then moved on to styling the standard HTML elements. View on GitHub PBS 57 of X - The Bootstrap GridĪs we’ve learned in previous instalments, there are four distinct aspects to Bootstrap, a collection of utility CSS classes, a collection of styles for controlling built-in HTML elements like headers, figures, images, and tables (which Bootstrap refers to as content), page layout functionality, and a collection of reusable components that don’t exist in native HTML.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |