bootstrap - bootstrap works only after resizing

Question

I'm developing a small application on codepen

http://codepen.io/asamolion/full/VjKzYV/

But the problem is that the bootstrap css doesn't load on page load. But it works when I resize the browser.

eg if I make the browser smaller and maximize it again then it will work but it's not working on first page load.

Does anyone know what the issue is?

Here is my of the central div

#quote-machine {
    text-align: center;
    padding: 10%;
    background: white;
    border-radius: 12px;
    box-shadow: inset 0 0 5px #AAA, 0 5px 10px #CCC;
    min-height: 60vh;
    min-width: 50vw;
}

Here are some screenshots

First load

Minimize

Maximize

It's width should be like "Maximize" on the first load but it isn't and I can't find the issue. Any help would be appreciated.

Thanks in advance.

Answer 1

<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10 col-lg-offset-1">

instead of using all the grid classes,

<div class="col-lg-10 col-lg-offset-1">

try with specific class and see

Answer 2

UPDATED: You can manually trigger it by setting the width of the fluid container on an ajax callback which is sort of hacky, but you only need to do it once.

Here's a link to my working example: Link to working example using simple window resize

.done(function() {
  $('.container-fluid').css('width', '100%');
})