title: React-big-calendar with bootstrap 4.0 alpha layout ugly
body: <p>I am using bootstrap 4.0 alpha with no other styles. The layout is very ugly that, the calendar shows only a single column instead of a table. Any idea of why and how?</p>
  
  <p>I notice the following from the website, but I don't understand what should I do:</p>
  
  <blockquote>
    <p>note: The default styles use height: 100% which means your container must set an explicit height (feel free to adjust the styles to suit your specific needs).</p>
  </blockquote>
  
  <p>This is my rendering code:</p>
  
  <pre><code>    render() {
      return (
          &lt;div className="container"&gt;
              &lt;TaskSearchBar
                  search={this.onSearch}
              /&gt;
              &lt;BigCalendar
                  selectable
                  events={[]}
                  defaultView='week'
                  scrollToTime={new Date(1970, 1, 1, 6)}
                  defaultDate={new Date(2015, 3, 12)}
                  onSelectEvent={event =&gt; alert(event.title)}
                  onSelectSlot={(slotInfo) =&gt; alert(
                      `selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
                      `\nend: ${slotInfo.end.toLocaleString()}`
                  )}
              /&gt;
              &lt;TaskList
                  queryUrl={this.state.queryUrl}
              /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>This is the layout result
  <a href="https://i.stack.imgur.com/HtVLg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HtVLg.png" alt="layout result"></a></p>