Advertisement
ndburrus

Use the Bootstrap Grid to Put @amnajaveri

Aug 19th, 2016
89
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.25 KB | None | 0 0
  1. // @amnajaveri
  2. // Use the Bootstrap Grid to Put Elements Side By Side
  3.  
  4. <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
  5. <style>
  6. .red-text {
  7. color: red;
  8. }
  9.  
  10. h2 {
  11. font-family: Lobster, Monospace;
  12. }
  13.  
  14. p {
  15. font-size: 16px;
  16. font-family: Monospace;
  17. }
  18.  
  19. .thick-green-border {
  20. border-color: green;
  21. border-width: 10px;
  22. border-style: solid;
  23. border-radius: 50%;
  24. }
  25.  
  26. .smaller-image {
  27. width: 100px;
  28. }
  29. </style>
  30. <div class="container-fluid">
  31. <h2 class="red-text text-center">CatPhotoApp</h2>
  32.  
  33. <p>Click here for <a href="#">cat photos</a>.</p>
  34.  
  35. <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
  36.  
  37. <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
  38.  
  39. // here we need to add the divs. the divs will allow organizing the buttons per row & column.
  40. // so, we need a div that wraps all 3 buttons. the opening div goes here. the opening that wraps all 3 buttons
  41. // will have a class of row
  42. // we also need (for each button) a div with a class of col-xs-4. of course, we need to ensure we open/close each div
  43. // set.
  44.  
  45. // update: the code for the opening div (and 1st button) follows
  46. // <div class="row">
  47. // <div class="col-xs-4">
  48. // <button class="btn btn-block btn-primary">Like</button>
  49. // </div>
  50.  
  51. <button class="btn btn-block btn-primary">Like</button>
  52. <button class="btn btn-block btn-info">Info</button>
  53. <button class="btn btn-block btn-danger">Delete</button>
  54. <p>Things cats love:</p>
  55. <ul>
  56. <li>cat nip</li>
  57. <li>laser pointers</li>
  58. <li>lasagna</li>
  59. </ul>
  60. <p>Top 3 things cats hate:</p>
  61. <ol>
  62. <li>flea treatment</li>
  63. <li>thunder</li>
  64. <li>other cats</li>
  65. </ol>
  66. <form action="/submit-cat-photo">
  67. <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  68. <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  69. <label><input type="checkbox" name="personality"> Loving</label>
  70. <label><input type="checkbox" name="personality"> Lazy</label>
  71. <label><input type="checkbox" name="personality"> Crazy</label>
  72. <input type="text" placeholder="cat photo URL" required>
  73. <button type="submit">Submit</button>
  74. </form>
  75. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement