#Bootstrap example responsive design tutorial code
You can add Font Awesome to any app just by including it by adding the following code to the top of your HTML: You can specify their size using pixels, and they will assume the font size of their parent HTML elements. These icons are vector graphics, stored in the. Notice how the image is now just the right size to fit along the text?įont Awesome is a convenient library of icons. Nest your h2 element within a and your image in a so that they are on the same line. Nest your first image and your h2 element within a single element. Most of Bootstrap's classes can be applied to a div element. Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. We will make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row. Then remove the red-text class from your h2 element and replace it with the text-primary Bootstrap class.įinally, remove the "smaller-image" class from your first img element and replace it with the img-responsive class. Then delete the p element that contains a dead link. smaller-image CSS declarations from your style element so that the only declarations left in your style element are h2 and thick-green-border. We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.ĭon't worry - there will be plenty of time to customize our CSS later.ĭelete the. The row class is applied to a div, and the buttons themselves can be nested within it. Put the Like, Info and Delete buttons side-by-side by nesting all three of them within one element, then each of them within a element. In the Cat Photo App that we're building, we'll use col-xs-*, where xs means extra small (like an extra-small mobile phone screen), and * is the number of columns specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified. Here, md means medium, and * is a number specifying how many columns wide the element should be. Note that in this illustration, the col-md-* class is being used. Here's a diagram of how Bootstrap's 12-column grid layout works:
Use the Bootstrap Grid to Put Elements Side By Side Completeīootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. To get started, we should nest all of our HTML in a div element with the class container-fluid. In this case, we've already added it for you to this page behind the scenes. You can add Bootstrap to any app by adding the following code to the top of your HTML:
0 kommentar(er)
