James111 James111 - 5 months ago 15
CSS Question

Bootstrap responsive rows without scaffolding?

I'm suppose to be building a webpage that's around

460px
in width that has 2 columns. Like this:

| TITLE OF AN ARTICLE .... | DATEOFARTICLE |


Todo this I've used:

<div className="container-fluid">
<div className="row">
<div className="col-sm-8">NAME OF ARTICLE</div>
<div className="col-sm-4">JUNE 6</div>
</div>
</div>


But columns scaffold at
760PX
instead of shrinking down e.g at
760PX
it looks like this with plenty of room:

| TITLE OF AN ARTICLE .... | DATEOFARTICLE |


But when it the width goes
< 760px
it looks scaffolds and ends up looking like this:

| TITLE OF AN ARTICLE .... WHITESPACE?! |
| DATEOFARTICLE WHITESPACE?! |


Their is a whole heap of whitespace. Is their a way to make bootstrap not scaffold?

So basically instead of scaffolding, like the above example, I'd want it to shrink down to look this:

| TITLE OF AN ARTICLE .... | DATEOFARTICLE |


Edit 1:



I changed my code to use
container-fluid
and it still does the same thing:

<div className="container-fluid">
<div className="row">
<div className="col-sm-9 col-md-6">
Name...
</div>

<div className="col-sm-3 col-md-6">
Jan 7
</div>
</div>
</div>

Answer

Try using the extra small classes col-xs-*

<div class="container-fluid">
      <div class="row">
         <div class="col-xs-8">NAME OF ARTICLE</div>
         <div class="col-xs-4">JUNE 6</div>
      </div>
</div>

Here is a JSFiddle
https://jsfiddle.net/zo8d93yq/

Comments