CODEWITHSUNDEEP
csstwitter-bootstrap
user2897448
user2897448

Reputation:

70% and 30% columns with Bootstrap

I got this "test" from a recruiting agency:

Create a page template with two layers, one 70% width and the second 30% of the page; in the first layer there will be the content, in the second the featured image.

I was wondering if I can achieve those exact percent with Bootstrap even if it's not meant to be used that way.

Upvotes: 1

Views: 17347

Answers (3)

BENARD Patrick
BENARD Patrick

Reputation: 30975

If you can add your own bootstrap library :

  1. Go to bootstrap cutomizing page:
  2. Set the @grid-columns variable to 10.
  3. Generate your own bootstrap css on clicking on download.
  4. Now your grid is from col-xs-1 to col-lg-10.

To have 70% and 30% :

<div class="row">
    <div class="col-xs-10 col-sm-7">70%</div>
    <div class="col-xs-10 col-sm-3">30%</div>
</div>

Upvotes: 8

user1575941
user1575941

Reputation:

Bootstrap is a framework - so it's a starting point... like a chassis in a car.. you'd want to build on top of it.

To resolve your conundrum start with deciding when, in terms of screen resolution, you want that split to happen. e.g. lets assume small screens (tablets and up).

  1. You'll need one of the framework col's, in the e.g. use .col-sm-4 & .col-sm-8. This establishes the responsiveness of the framework with inherited css like position, min-height, paddin-*.

  2. Then you'll need to override the CSS you want changed. Since we're looking to only show 30/70 on small screen an up we look to the variables.less file (in the Bootstrap source on github).

We find in there that small screens have a media breakpoint at 768px (@screen-sm-min). Now you can build a less file with the variable imported, or just hard code the value in a add-on CSS (as part of your pages own CSS) the following:

    @media (min-width: 768px) {
      .col-sm-30 { width: 30%; }
      .col-sm-70 { width: 70%; }
    }

You don't need anything else but width, as the rest will be inherited from .col-md-*

  1. Finally, your code will then use this:
    <div class="row">
      <div class="col-md-4 col-md-30">...</div>
      <div class="col-md-8 col-md-70">...</div>
    </div>

Remember, that *md-30 must appear after *md-4 so that the *30 overrides the *4. The override behaviour is driven by the sequence of class definitions, where the last one wins.

Upvotes: 1

Riken Shah
Riken Shah

Reputation: 3154

Why don't you explicitly define the width for that div.

.thirty {
  width: 30%;
  display: block;
  float: right;
}

.seventy {
  width: 70%;
  display: block;
  float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-4 seventy">Here You can add the content</div>
    <div class="col-md-8 thirty">Place for the image</div>
  </div>
</div>

Upvotes: 1

Related Questions