htmlcsstwitter-bootstrapbootstrap-4

Define bootstrap col-md-** in ways other than inline

Consider the below example

<html>
<head>
</head>
<body>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
</body>
</html>

Is there a cleaner way to write this, like the below. I don't understand why the bootstrap grid rules have to be specified inline

<html>
<head>
   <style>
      .div-alpha
      {
         col-xs:12;
         col-sm:12;
         col-md:4;
         col-lg:4;
         offset-md:4;
         offset-lg:4;
      }
   </style>
</head>
<body>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
</body>
</html>
Solution

  • Bootstrap is only a framework; you're free to adapt however you would like. Simply apply the styling that Bootstrap gives to its selectors to your own, and you'll be able to modify to suit.

    Bootstrap's col- selectors simply apply different styling to elements at given breakpoints.

    Keep in mind that as of Bootstrap 3, they use mobile-first design, so the order of the media queries is very important (due to equal specificity)! Always start with the smallest media query, and work upwards to the largest media query (akin to the term 'mobile-first').

    You can craft your own media queries to give the same effect as Bootstrap, while cutting down on the required HTML by combining various Bootstrap logic classes in your own classes:

    /* Purely for visibilty */
.div-alpha {
  height: 100px;
  border: 1px solid black;
}

* {
  box-sizing: border-box;
}

.row {
  margin-left: 15px;
  margin-right: 15px;
}

.row::after, .row::before {
  display: table;
  content: " ";
}

.row::after {
    clear: both;  
}

*::after, *::before {
  box-sizing: border-box;
}

.div-alpha {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

/* .col-xs- */
@media (max-width: 768px) {
  .div-alpha {
    width:  100%;
  }
}

/* .col-sm- */
@media (min-width: 768px) {
  .div-alpha {
    width:  66.66666666%;
  }
}

/* .col-md- */
@media (min-width: 992px) {
  .div-alpha {
    width:  50%;
  }
}

/* .col-lg- */
@media (min-width: 1200px) {
  .div-alpha {
    width:  33.33333333%;
  }
}
    <div class="row">
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
</div>

    In the above, I apply the 'core' Bootstrap logic to both row and the standalone .div-alpha. Then I use media queries to control how it adapts at various different widths (without needing Bootstrap). A JSFiddle of that is available here.

    Hope this helps! :)