You are here

Home » API reference » Bootstrap Paragraphs 8.2

bootstrap-paragraphs-carousel.css in Bootstrap Paragraphs 8.2

The css file for Bootstrap Paragraphs Carousel.

Compiled from bootstrap-paragraphs-carousel.less.

File

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

  2.  * @file

  3.  * The css file for Bootstrap Paragraphs Carousel.

  4.  *

  5.  * Compiled from bootstrap-paragraphs-carousel.less.

  6.  */

  7. /* Adds float so it behaves like the rest of the Paragraphs. */

  8. .paragraph--type--bp-carousel {

  9.   float: left;

  10. }

  11. /**

  12.  * Widths.

  13.  *

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

  15.  */

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

  17. .paragraph.paragraph--width--tiny.paragraph--type--bp-carousel > .carousel-inner {

  18.   position: relative;

  19.   min-height: 1px;

  20.   padding-left: 0 !important;

  21.   padding-right: 0 !important;

  22. }

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

  24.   .paragraph.paragraph--width--tiny.paragraph--type--bp-carousel > .carousel-inner {

  25.     float: left;

  26.     width: 33.33333333%;

  27.   }

  28. }

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

  30.   .paragraph.paragraph--width--tiny.paragraph--type--bp-carousel > .carousel-inner {

  31.     margin-left: 33.33333333%;

  32.   }

  33. }

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

  35. .paragraph.paragraph--width--narrow.paragraph--type--bp-carousel > .carousel-inner {

  36.   position: relative;

  37.   min-height: 1px;

  38.   padding-left: 0 !important;

  39.   padding-right: 0 !important;

  40. }

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

  42.   .paragraph.paragraph--width--narrow.paragraph--type--bp-carousel > .carousel-inner {

  43.     float: left;

  44.     width: 50%;

  45.   }

  46. }

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

  48.   .paragraph.paragraph--width--narrow.paragraph--type--bp-carousel > .carousel-inner {

  49.     margin-left: 25%;

  50.   }

  51. }

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

  53. .paragraph.paragraph--width--medium.paragraph--type--bp-carousel > .carousel-inner {

  54.   position: relative;

  55.   min-height: 1px;

  56.   padding-left: 0 !important;

  57.   padding-right: 0 !important;

  58. }

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

  60.   .paragraph.paragraph--width--medium.paragraph--type--bp-carousel > .carousel-inner {

  61.     float: left;

  62.     width: 66.66666667%;

  63.   }

  64. }

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

  66.   .paragraph.paragraph--width--medium.paragraph--type--bp-carousel > .carousel-inner {

  67.     margin-left: 16.66666667%;

  68.   }

  69. }

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

  71. .paragraph.paragraph--width--wide.paragraph--type--bp-carousel > .carousel-inner {

  72.   position: relative;

  73.   min-height: 1px;

  74.   padding-left: 0 !important;

  75.   padding-right: 0 !important;

  76. }

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

  78.   .paragraph.paragraph--width--wide.paragraph--type--bp-carousel > .carousel-inner {

  79.     float: left;

  80.     width: 83.33333333%;

  81.   }

  82. }

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

  84.   .paragraph.paragraph--width--wide.paragraph--type--bp-carousel > .carousel-inner {

  85.     margin-left: 8.33333333%;

  86.   }

  87. }

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

  89. .paragraph.paragraph--width--full.paragraph--type--bp-carousel > .carousel-inner {

  90.   position: relative;

  91.   min-height: 1px;

  92.   padding-left: 0 !important;

  93.   padding-right: 0 !important;

  94. }

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

  96.   .paragraph.paragraph--width--full.paragraph--type--bp-carousel > .carousel-inner {

  97.     float: left;

  98.     width: 100%;

  99.   }

  100. }

  101. /* Removes padding-left/padding-right added by columns in a carousel. */

  102. .paragraph.paragraph--type--bp-carousel .paragraph--type--bp-columns > .paragraph__column,

  103. .paragraph.paragraph--type--bp-carousel .paragraph--type--bp-columns-two-uneven > .paragraph__column,

  104. .paragraph.paragraph--type--bp-carousel .paragraph--type--bp-columns-three-uneven > .paragraph__column {

  105.   padding-left: 0;

  106.   padding-right: 0;

  107. }