You are here

Home » API reference » Bootstrap Paragraphs 8.2

bootstrap-paragraphs.css in Bootstrap Paragraphs 8.2

Same filename and directory in other branches
  1. 8 css/bootstrap-paragraphs.css

The base css file for Bootstrap Paragraphs.

Compiled from bootstrap-paragraphs.less.

File

css/bootstrap-paragraphs.css
View source 
  1. /**

  2.  * @file

  3.  * The base css file for Bootstrap Paragraphs.

  4.  *

  5.  * Compiled from bootstrap-paragraphs.less.

  6.  */

  7. /**

  8.  * Base Paragraph Styling.

  9.  *

  10.  * Here we style the .paragraph as a Bootstrap .row and .paragraph__column as a

  11.  * full width column.  We also add padding to the bottom.

  12.  */

  13. .paragraph {

  14.   display: table;

  15.   margin-left: 0;

  16.   margin-right: 0;

  17.   table-layout: fixed;

  18.   width: 100%;

  19. }

  20. .paragraph:before,

  21. .paragraph:after {

  22.   content: " ";

  23.   display: table;

  24.   table-layout: fixed;

  25. }

  26. .paragraph:after {

  27.   clear: both;

  28. }

  29. .paragraph > .paragraph__column {

  30.   position: relative;

  31.   min-height: 1px;

  32.   padding-left: 15px;

  33.   padding-right: 15px;

  34.   padding-bottom: 30px;

  35. }

  36. @media (min-width: 768px) {

  37.   .paragraph > .paragraph__column {

  38.     float: left;

  39.     width: 100%;

  40.   }

  41. }

  42. /* Remove bottom padding on nested paragraphs. */

  43. .paragraph--type--bp-carousel .paragraph:last-of-type > .paragraph__column,

  44. .paragraph--type--bp-columns .paragraph:last-of-type > .paragraph__column,

  45. .paragraph--type--bp-columns-three-uneven .paragraph:last-of-type > .paragraph__column,

  46. .paragraph--type--bp-columns-two-uneven .paragraph:last-of-type > .paragraph__column,

  47. .paragraph--type--bp-tabs .paragraph:last-of-type > .paragraph__column {

  48.   padding-bottom: 0;

  49. }

  50. /**

  51.  * Widths.

  52.  *

  53.  * Here we style the widths for each paragraph.

  54.  */

  55. /* Adds Width Element -- Tiny. */

  56. .paragraph.paragraph--width--tiny > .paragraph__column {

  57.   position: relative;

  58.   min-height: 1px;

  59.   padding-left: 15px;

  60.   padding-right: 15px;

  61. }

  62. @media (min-width: 768px) {

  63.   .paragraph.paragraph--width--tiny > .paragraph__column {

  64.     float: left;

  65.     width: 33.33333333%;

  66.   }

  67. }

  68. @media (min-width: 768px) {

  69.   .paragraph.paragraph--width--tiny > .paragraph__column {

  70.     margin-left: 33.33333333%;

  71.   }

  72. }

  73. /* Adds Width Element -- Narrow. */

  74. .paragraph.paragraph--width--narrow > .paragraph__column {

  75.   position: relative;

  76.   min-height: 1px;

  77.   padding-left: 15px;

  78.   padding-right: 15px;

  79. }

  80. @media (min-width: 768px) {

  81.   .paragraph.paragraph--width--narrow > .paragraph__column {

  82.     float: left;

  83.     width: 50%;

  84.   }

  85. }

  86. @media (min-width: 768px) {

  87.   .paragraph.paragraph--width--narrow > .paragraph__column {

  88.     margin-left: 25%;

  89.   }

  90. }

  91. /* Adds Width Element -- Medium. */

  92. .paragraph.paragraph--width--medium > .paragraph__column {

  93.   position: relative;

  94.   min-height: 1px;

  95.   padding-left: 15px;

  96.   padding-right: 15px;

  97. }

  98. @media (min-width: 768px) {

  99.   .paragraph.paragraph--width--medium > .paragraph__column {

  100.     float: left;

  101.     width: 66.66666667%;

  102.   }

  103. }

  104. @media (min-width: 768px) {

  105.   .paragraph.paragraph--width--medium > .paragraph__column {

  106.     margin-left: 16.66666667%;

  107.   }

  108. }

  109. /* Adds Width Element -- Wide. */

  110. .paragraph.paragraph--width--wide > .paragraph__column {

  111.   position: relative;

  112.   min-height: 1px;

  113.   padding-left: 15px;

  114.   padding-right: 15px;

  115. }

  116. @media (min-width: 768px) {

  117.   .paragraph.paragraph--width--wide > .paragraph__column {

  118.     float: left;

  119.     width: 83.33333333%;

  120.   }

  121. }

  122. @media (min-width: 768px) {

  123.   .paragraph.paragraph--width--wide > .paragraph__column {

  124.     margin-left: 8.33333333%;

  125.   }

  126. }

  127. /* Adds Width Element -- Full. */

  128. .paragraph.paragraph--width--full > .paragraph__column {

  129.   position: relative;

  130.   min-height: 1px;

  131.   padding-left: 15px;

  132.   padding-right: 15px;

  133. }

  134. @media (min-width: 768px) {

  135.   .paragraph.paragraph--width--full > .paragraph__column {

  136.     float: left;

  137.     width: 100%;

  138.   }

  139. }

  140. /**

  141.  * Nesting Paragraphs.

  142.  *

  143.  * Here are some helpers for temove margin/padding when nesting bundles.

  144.  */

  145. /* Resets Base Paragraph Styling for Nested Paragraphs. */

  146. .paragraph .paragraph,

  147. .paragraph .paragraph .paragraph {

  148.   margin-left: 0;

  149.   margin-right: 0;

  150. }

  151. .paragraph > .paragraph__column .paragraph > .paragraph__column,

  152. .paragraph > .paragraph__column .paragraph > .paragraph__column .paragraph > .paragraph__column {

  153.   float: none;

  154.   margin-left: 0;

  155.   padding-left: 0;

  156.   padding-right: 0;

  157.   width: auto;

  158. }