Billy Logan February 2016

How at least approximately imitate col-md-1.5?

I need to adjust Bootstrap columns to look like this.

enter image description here

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;
}

Answers


sringland February 2016

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.


Flirt February 2016

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;
}


Maky February 2016

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

Post Status

Asked in February 2016
Viewed 3,261 times
Voted 7
Answered 3 times

Search




Leave an answer