--- id: bad88fee1348ce8acef08815 title: Use the Bootstrap Grid to Put Elements Side By Side challengeType: 0 forumTopicId: 18371 dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side --- # --description-- Bootstrap uses a responsive 12-column grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a `div` element. Bootstrap has different column width attributes that it uses depending on how wide the user's screen is. For example, phones have narrow screens, and laptops have wider screens. Take for example Bootstrap's `col-md-*` class. Here, `md` means medium, and `*` is a number 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. 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. Put the `Like`, `Info` and `Delete` buttons side-by-side by nesting all three of them within one `