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 <div class="row">
element, then each of them within a <div class="col-xs-4">
element.
The row
class is applied to a div
, and the buttons themselves can be nested within it.
div
element with the class row
.
testString: assert($("div.row:has(button)").length > 0, 'Your buttons should all be nested within the same div
element with the class row
.');
- text: Each of your Bootstrap buttons should be nested within its own div
element with the class col-xs-4
.
testString: assert($("div.col-xs-4:has(button)").length > 2, 'Each of your Bootstrap buttons should be nested within its own div
element with the class col-xs-4
.');
- text: Make sure each of your button
elements has a closing tag.
testString: assert(code.match(/<\/button>/g) && code.match(/