React-big-calendar with bootstrap 4.0 alpha layout ugly

Question

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?

I notice the following from the website, but I don't understand what should I do:

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

This is my rendering code:

    render() {
    return (
        <div className="container">
            <TaskSearchBar
                search={this.onSearch}
            />
            <BigCalendar
                selectable
                events={[]}
                defaultView='week'
                scrollToTime={new Date(1970, 1, 1, 6)}
                defaultDate={new Date(2015, 3, 12)}
                onSelectEvent={event => alert(event.title)}
                onSelectSlot={(slotInfo) => alert(
                    `selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
                    `\nend: ${slotInfo.end.toLocaleString()}`
                )}
            />
            <TaskList
                queryUrl={this.state.queryUrl}
            />
        </div>
    );
}

This is the layout result

Answer 1

I found I missed this line:

require('react-big-calendar/lib/css/react-big-calendar.css');

Thanks to enter link description here