CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Robert
Robert

Reputation: 812

Bootstrap 6 columns Responsive

I want to have 6 columns responsive, I create this html but is not so good, maybe someone can give me the correct structure and css. The issue here is when I try to resize the window the icon and text is not resize it.

HTML

<div class="container">
  <div class="row">
    <div class="header-block col-xs-12">
      <div class="block1 col-xs-2">
        <a href="{{store%20direct_url="><span><strong>100% forn&oslash;yd</strong>V&aring;rt m&aring;l!</span></a>
      </div>
      <div class="block2 col-xs-2">
        <a href="{{store%20direct_url="><span><strong>Rask levering</strong>stort lager!</span></a>
      </div>
      <div class="block3 col-xs-2">
        <a href="{{store%20direct_url="><span><strong>Serviceverksted</strong>Minimal driftstans!</span></a>
      </div>
      <div class="block4 col-xs-2">
        <a href="{{store%20direct_url="><span><strong>Kataloger</strong>Se våre produkter!</span></a>
      </div>
      <div class="block6 col-xs-2">
        <a href="{{store%20direct_url="><span><strong>Finansiering</strong>Fleksible løsninger!</span></a>
      </div>
      <div class="block5 col-xs-2">
        <a href="https://www.facebook.com/diaproff/" target="_blank"><span><strong>Hold kontakten</strong>Følg oss på facebook!</span></a>
      </div>
    </div>
  </div>
</div>

CSS:

.header-block > div {
  float: left;
  position: relative;
  margin-right: 10px;
  padding: 5px 10px;
  max-width: 224px;
}
.header-block span {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  padding-left: 48px;
  color: #262626;
}
.header-block strong {
  display: block;
}
.header-block > div:before {
  font-size: 42px;
  line-height: 42px;
  color: #faa641;
  position: absolute;
  left: 10px;
  top: 5px;
}
.header-block .block1:before {
  content: '\f087';
}
.header-block .block2:before {
  content: '\f0d1';
}
.header-block .block3:before {
  content: '\f021';
}
.header-block .block4:before {
  content: '\f07c';
}
.header-block .block5:before {
  content: '\f082';
}
.header-block .block6:before {
  content: '\f0d6';
}

enter image description here

Upvotes: 0

Views: 2653

Answers (1)

yBrodsky
yBrodsky

Reputation: 5041

Your html is wrong. Cols should always be inside a row. Also, if you modify a col padding or its margins, you will break bootstrap. If you want to touch that you have to do it via the source (less or sass). So that block classes you are adding to the cols, will for sure break bootstrap.

<div class="container">
  <div class="row">
    <div class="col-xs-12">Whatever you want full row</div>
    <div class="col-xs-2">1</div>
    <div class="col-xs-2">2</div>
    <div class="col-xs-2">3</div>
    <div class="col-xs-2">4</div>
    <div class="col-xs-2">5</div>
    <div class="col-xs-2">6</div>

  </div>
</div>

This (above) will give you 6 cols responsive. If you want to nest columns:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-2">1</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">3</div>
        <div class="col-xs-2">4</div>
        <div class="col-xs-2">5</div>
        <div class="col-xs-2">6</div>
      </div>
    </div>
  </div>
</div>

If you need each col content to have padding you will have to apply the padding to a child div:

...
<div class="col-xs-2">
  <div class="some-padding">
    this content will have padding and not break bootstrap
  </div>
</div>

Upvotes: 2

Related Questions