70% and 30% columns with Bootstrap - css

Question

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.

Answer 1

If you can add your own bootstrap library :
Go to bootstrap cutomizing page:
Set the #grid-columns variable to 10.
Generate your own bootstrap css on clicking on download.
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>

Answer 2

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).
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-*.
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-*
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.

Answer 3

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>