Whether you’re searching for a small card design to showcase bite-sized content or a full-length extended card to provide concise information, this selection of bootstrap cards examples has a design for you.īootstrap cards grid extremely fluid and adjust quickly to the screen size. The cards’ simplicity and adaptability enable designers to use them for a variety of purposes. In this lab we reviewed the responsive behavior of Bootstrap’s grids.Bootstrap cards grid are widely utilized in current interface design, from Google Assistant search recommendations to online meal delivery applications. So the “stacking up” occurs at screen widths below 768 pixels. Repeat the page width change steps as performed in the previous lab part.Īs you would expect, the sm device CSS media rule now (min-width: 768px) Replace the -md- parts of the column class names with -sm-Īfter the change, grid.html should looks as follows: *… Content omitted for space … * Switch back to your text editor opened on Bgrid.html Let’s see how the behavior of your grid may be affected by your changing the column type from md to sm (tablets and such). In other words, the (min-width: 992px) rule is honored by Chrome. Now, your page layout should have all the cells laid out horizontally. Your page layout should have all the cells stacked-up.Ĭlick in the Screen window on the Device emulator toolbar again and change the width of the screen to 992 (pixels). Try to identify the value of that threshold for the layout change.īefore you spend more time that is needed, try to remember the value of the breakpoint for md devices as captured in its CSS media (min-width: 992px)Ĭlick in the Screen window on the Device emulator toolbar and change the width of the screen to 991 (pixels) Start increasing the width of the page, the layout should change back to the original horizontal one after a specific page width. Interestingly enough, all the cells are now fit into a single column with a width of 750px. Using the emulator window handle represented by three vertical bars (|||) start making the window more narrow.Īt a certain value of the screen width, the layout of your page will change stacking up all the cells in one column. Note: You can also use the Ctrl-Shift-M key combination to switch to this mode. You should be placed in the Device emulation window. Now let’s see how the Bootstrap’s grid responds to changes in the page width.Ĭlick the “ Toogle device mode” icon on the left-hand side of the DevTools toolbar right to the left of the Element tab. Note: You can also try and click the Arrow icon on the left-most end of the DevTools toolbar, or press Ctrl-Shift-C which will active the HTML element selection mode. The blue portion of the highlighted cell demarcates your main cell content boundaries, the green ones are the configured padding.
Observe how the corresponding cell is being highlighted in your grid. The source of the currently loaded page should be displayed.Įxpand the first div.container / div.row element and move your mouse over the If necessary, click the Dock side icon in the middle to dock the console to the bottom of the browser window.Ĭlick Elements on the left hand side of the DevTools toolbar. In Chrome, press F12 to open the DevTools console. You should see the following page content: Open your Chrome browser and navigate to the following URL: http:\localhostBgrid.html Keep the editor open on the file - we will need it a bit later. Notice that our grid does not require any JS files, which are commented out at the bottom of the page. We are using the **md moniker which applies to devices with medium desktop screen resolution. Review the grid structure built using div elements which are styled with the. If the B directory does not exists, copy the C:LabFilesB directory over to the directory. In text below, we refer to the location of the Web Server’s document root directory as which is specific to your Lab environment. Instructions below apply to the Chrome browser should you wish to use another browser instead, then you are to find and use matching procedures on that browser. In this lab, we will use a simple Bootstrap grid to analyze its responsive behavior. It helps you lay out other elements and images in a neat and orderly fashion on a page. Bootstrap’s grid system is a simple yet very powerful feature of Bootstrap.
0 kommentar(er)
