Bootstrap Grid with column widths in 10ths and 8ths

bootstrap-custom-columns.css

/* custom bootstrap grid by Hugh Anderson */

.col-xs-110 { width: calc(100% / 10) }  /* 1/10 */
.col-xs-18 { width: calc(100% / 8) }    /* 1/8 */
.col-xs-15 { width: calc(100% / 5) }    /* 1/5 */
.col-xs-38 { width: calc(300% / 8) }    /* 3/8 */
.col-xs-310 { width: calc(300% / 10) }  /* 3/10 */
.col-xs-25 { width: calc(200% / 5) }    /* 2/5 */
.col-xs-35 { width: calc(300% / 5) }    /* 3/5 */
.col-xs-58 { width: calc(500% / 8) }    /* 5/8 */
.col-xs-710 { width: calc(700% / 10) }  /* 7/10 */
.col-xs-45 { width: calc(400% / 5) }    /* 4/5 */
.col-xs-78 { width: calc(700% / 8) }    /* 7/8 */
.col-xs-910 { width: calc(900% / 10) }  /* 9/10 */

.col-xs-110, .col-xs-18, .col-xs-15, .col-xs-38, .col-xs-310, .col-xs-25, .col-xs-35, .col-xs-58, .col-xs-710, .col-xs-45, .col-xs-78, .col-xs-910  {
    float: left;
}

@media (min-width: 768px) {
    .col-sm-110 { width: calc(100% / 10) }
    .col-sm-18 { width: calc(100% / 8) }
    .col-sm-15 { width: calc(100% / 5) }
    .col-sm-38 { width: calc(300% / 8) }
    .col-sm-310 { width: calc(300% / 10) }
    .col-sm-25 { width: calc(200% / 5) }
    .col-sm-35 { width: calc(300% / 5) }
    .col-sm-58 { width: calc(500% / 8) }
    .col-sm-710 { width: calc(700% / 10) }
    .col-sm-45 { width: calc(400% / 5) }
    .col-sm-78 { width: calc(700% / 8) }
    .col-sm-910 { width: calc(900% / 10) }

    .col-sm-110, .col-sm-18, .col-sm-15, .col-sm-38, .col-sm-310, .col-sm-25, .col-sm-35, .col-sm-58, .col-sm-710, .col-sm-45, .col-sm-78, .col-sm-910  {
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-110 { width: calc(100% / 10) }
    .col-md-18 { width: calc(100% / 8) }
    .col-md-15 { width: calc(100% / 5) }
    .col-md-38 { width: calc(300% / 8) }
    .col-md-310 { width: calc(300% / 10) }
    .col-md-25 { width: calc(200% / 5) }
    .col-md-35 { width: calc(300% / 5) }
    .col-md-58 { width: calc(500% / 8) }
    .col-md-710 { width: calc(700% / 10) }
    .col-md-45 { width: calc(400% / 5) }
    .col-md-78 { width: calc(700% / 8) }
    .col-md-910 { width: calc(900% / 10) }

    .col-md-110, .col-md-18, .col-md-15, .col-md-38, .col-md-310, .col-md-25, .col-md-35, .col-md-58, .col-md-710, .col-md-45, .col-md-78, .col-md-910  {
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-110 { width: calc(100% / 10) }
    .col-lg-18 { width: calc(100% / 8) }
    .col-lg-15 { width: calc(100% / 5) }
    .col-lg-38 { width: calc(300% / 8) }
    .col-lg-310 { width: calc(300% / 10) }
    .col-lg-25 { width: calc(200% / 5) }
    .col-lg-35 { width: calc(300% / 5) }
    .col-lg-58 { width: calc(500% / 8) }
    .col-lg-710 { width: calc(700% / 10) }
    .col-lg-45 { width: calc(400% / 5) }
    .col-lg-78 { width: calc(700% / 8) }
    .col-lg-910 { width: calc(900% / 10) }

    .col-lg-110, .col-lg-18, .col-lg-15, .col-lg-38, .col-lg-310, .col-lg-25, .col-lg-35, .col-lg-58, .col-lg-710, .col-lg-45, .col-lg-78, .col-lg-910  {
        float: left;
    }
}


.col-xs-110, .col-xs-18, .col-xs-15, .col-xs-38, .col-xs-310, .col-xs-25, .col-xs-35, .col-xs-58, .col-xs-710, .col-xs-45, .col-xs-78, .col-xs-910,
.col-sm-110, .col-sm-18, .col-sm-15, .col-sm-38, .col-sm-310, .col-sm-25, .col-sm-35, .col-sm-58, .col-sm-710, .col-sm-45, .col-sm-78, .col-sm-910,
.col-md-110, .col-md-18, .col-md-15, .col-md-38, .col-md-310, .col-md-25, .col-md-35, .col-md-58, .col-md-710, .col-md-45, .col-md-78, .col-md-910,
.col-lg-110, .col-lg-18, .col-lg-15, .col-lg-38, .col-lg-310, .col-lg-25, .col-lg-35, .col-lg-58, .col-lg-710, .col-lg-45, .col-lg-78, .col-lg-910  {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}