_grid.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. // Container widths
  2. //
  3. // Set the container width, and override it for fixed navbars in media queries.
  4. .container {
  5. @include make-container();
  6. // For each breakpoint, define the maximum width of the container in a media query
  7. @each $breakpoint, $container-max-width in $container-max-widths {
  8. @include media-breakpoint-up($breakpoint) {
  9. max-width: $container-max-width;
  10. }
  11. }
  12. }
  13. // Fluid container
  14. //
  15. // Utilizes the mixin meant for fixed width containers, but without any defined
  16. // width for fluid, full width layouts.
  17. .container-fluid {
  18. @include make-container();
  19. }
  20. // Row
  21. //
  22. // Rows contain and clear the floats of your columns.
  23. .row {
  24. @include make-row();
  25. }
  26. // Columns
  27. //
  28. // Common styles for small and large grid columns
  29. @include make-grid-columns();
  30. // Flex variation
  31. //
  32. // Custom styles for additional flex alignment options.
  33. @if $enable-flex {
  34. // Flex column reordering
  35. .col-xs-first { order: -1; }
  36. .col-xs-last { order: 1; }
  37. @include media-breakpoint-up(sm) {
  38. .col-sm-first { order: -1; }
  39. .col-sm-last { order: 1; }
  40. }
  41. @include media-breakpoint-up(md) {
  42. .col-md-first { order: -1; }
  43. .col-md-last { order: 1; }
  44. }
  45. @include media-breakpoint-up(lg) {
  46. .col-lg-first { order: -1; }
  47. .col-lg-last { order: 1; }
  48. }
  49. @include media-breakpoint-up(xl) {
  50. .col-xl-first { order: -1; }
  51. .col-xl-last { order: 1; }
  52. }
  53. // Alignment for every column in row
  54. .row-xs-top { align-items: flex-start; }
  55. .row-xs-center { align-items: center; }
  56. .row-xs-bottom { align-items: flex-end; }
  57. @include media-breakpoint-up(sm) {
  58. .row-sm-top { align-items: flex-start; }
  59. .row-sm-center { align-items: center; }
  60. .row-sm-bottom { align-items: flex-end; }
  61. }
  62. @include media-breakpoint-up(md) {
  63. .row-md-top { align-items: flex-start; }
  64. .row-md-center { align-items: center; }
  65. .row-md-bottom { align-items: flex-end; }
  66. }
  67. @include media-breakpoint-up(lg) {
  68. .row-lg-top { align-items: flex-start; }
  69. .row-lg-center { align-items: center; }
  70. .row-lg-bottom { align-items: flex-end; }
  71. }
  72. @include media-breakpoint-up(xl) {
  73. .row-xl-top { align-items: flex-start; }
  74. .row-xl-center { align-items: center; }
  75. .row-xl-bottom { align-items: flex-end; }
  76. }
  77. // Alignment per column
  78. .col-xs-top { align-self: flex-start; }
  79. .col-xs-center { align-self: center; }
  80. .col-xs-bottom { align-self: flex-end; }
  81. @include media-breakpoint-up(sm) {
  82. .col-sm-top { align-self: flex-start; }
  83. .col-sm-center { align-self: center; }
  84. .col-sm-bottom { align-self: flex-end; }
  85. }
  86. @include media-breakpoint-up(md) {
  87. .col-md-top { align-self: flex-start; }
  88. .col-md-center { align-self: center; }
  89. .col-md-bottom { align-self: flex-end; }
  90. }
  91. @include media-breakpoint-up(lg) {
  92. .col-lg-top { align-self: flex-start; }
  93. .col-lg-center { align-self: center; }
  94. .col-lg-bottom { align-self: flex-end; }
  95. }
  96. @include media-breakpoint-up(xl) {
  97. .col-xl-top { align-self: flex-start; }
  98. .col-xl-center { align-self: center; }
  99. .col-xl-bottom { align-self: flex-end; }
  100. }
  101. }