How at least approximately imitate col-md-1.5? - html

Question

I need to adjust Bootstrap columns to look like this.
The thing is that on smaller devices I just want to hide this blank areas on the sides, thus I don't wanna use just margins or paddings.
How can I achieve that? col-md-1 seems too small for the indents, while col-md-2 is too broad.
My Codepen with Bootstrap included.
HTML
<div class="container">
</div>
CSS
.container {
height: 230px;
background-color: blue;
max-width: 1050px;
padding-left: 15px;
padding-right: 15px;
}

Answer 1

If you don't want to declare any new classes padding etc. You can simply nest the columns bootply.com

Answer 2

Not really sure what you're trying to achieve here. The container changes it width depending on the screen size using media queries. The white/blank space you're trying to get rid off is disappearing when the size of the screen is less than 768px.
What you can do, if I understand your question correct is this option:
HTML:
<!-- CONTAINER -->
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
</div>
</div>
</div>
</div>
<!-- CONTAINER FLUID -->
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
</div>
</div>
</div>
</div>
CSS:
.container-fluid,
.container {
height: 230px;
background-color: #333;
/* max-width: 1050px; */
padding-left: 15px;
padding-right: 15px;
margin-bottom: 15px;
}
html, body {
color: #fff;
}

Answer 3

Couldn't you just use a #media tag to cut the padding out when in mobile view? Makes it a lot easier. Just add the class below to either your container or row.
.marginClass{
margin: 0 15px 0 15px;
}
#media screen and (min-width: 480px) {
.marginClass{
margin: 0;
}
Actually you're probably better using margin. I've updated that.