You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_grid.scss 1.6KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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. @include make-container-max-widths();
  7. }
  8. // Fluid container
  9. //
  10. // Utilizes the mixin meant for fixed width containers, but without any defined
  11. // width for fluid, full width layouts.
  12. .container-fluid {
  13. @include make-container();
  14. }
  15. // Row
  16. //
  17. // Rows contain and clear the floats of your columns.
  18. @if $enable-grid-classes {
  19. .row {
  20. @include make-row();
  21. }
  22. }
  23. // Columns
  24. //
  25. // Common styles for small and large grid columns
  26. @if $enable-grid-classes {
  27. @include make-grid-columns();
  28. }
  29. // Flex variation
  30. //
  31. // Custom styles for additional flex alignment options.
  32. @if $enable-flex and $enable-grid-classes {
  33. // Flex column reordering
  34. @each $breakpoint in map-keys($grid-breakpoints) {
  35. @include media-breakpoint-up($breakpoint) {
  36. .col-#{$breakpoint}-first { order: -1; }
  37. .col-#{$breakpoint}-last { order: 1; }
  38. }
  39. }
  40. // Alignment for every column in row
  41. @each $breakpoint in map-keys($grid-breakpoints) {
  42. @include media-breakpoint-up($breakpoint) {
  43. .row-#{$breakpoint}-top { align-items: flex-start; }
  44. .row-#{$breakpoint}-center { align-items: center; }
  45. .row-#{$breakpoint}-bottom { align-items: flex-end; }
  46. }
  47. }
  48. // Alignment per column
  49. @each $breakpoint in map-keys($grid-breakpoints) {
  50. @include media-breakpoint-up($breakpoint) {
  51. .col-#{$breakpoint}-top { align-self: flex-start; }
  52. .col-#{$breakpoint}-center { align-self: center; }
  53. .col-#{$breakpoint}-bottom { align-self: flex-end; }
  54. }
  55. }
  56. }