Why is my loading spinner not being centralised bootstrap 4

Question

I trying to implement have a web application with bootstrap4 and react. I have a loading spinner which looks like the following:

I want this loading spinner to be in the middle of the page rather than in the top left corner. The current DOM structure is as follows:

<div>
                    <NavBar clickHandler={(ticker) => this.handleSearchClick(ticker)} tickers={ftse100Tickers.tickers}/>
                    <div className="container-fluid">
                        <div className="row">
                            <NavBarSide clickHandler={(url) => this.handleNavClick(url)}/>
                            <div className="col-md-9 ml-sm-auto col-lg-10 pt-2 px-3">
                                <div className="container d-flex h-100">
                                    <svg id="svgspin" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 16 16">
                                        <path d="m8 0c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8m4.88 9.21c-.57 2.23-2.58 3.79-4.88 3.79s-4.31-1.56-4.88-3.79c-.1-.38.13-.76.51-.86.06-.02.12-.02.18-.02.32 0 .6.22.68.53.41 1.61 1.86 2.73 3.52 2.73s3.1-1.12 3.52-2.73c.08-.31.36-.53.68-.53.06 0 .12.001.18.02.18.05.34.16.43.33s.12.35.07.54"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Do I need to add an align center to the row class? Or add an align to the inner container?

The NavBarSide is simply:

<Nav className="col-md-2 d-none d-md-block bg-light sidebar">
                <div className="sidebar-sticky">
                    <ul className="nav flex-column">
                        <Dropdown nav isOpen={this.state.dropdownError} toggle={this.toggleError}>
                            <DropdownToggle nav caret>Error</DropdownToggle>
                            <DropdownMenu>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/highest/error")}>Highest</DropdownItem>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/lowest/error")}>Lowest</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                        <Dropdown nav isOpen={this.state.dropdownPrice} toggle={this.togglePrice}>
                            <DropdownToggle nav caret>Price</DropdownToggle>
                            <DropdownMenu>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/highest/price")}>Highest</DropdownItem>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/lowest/price")}>Lowest</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                        <Dropdown nav isOpen={this.state.dropdownVolume} toggle={this.toggleVolume}>
                            <DropdownToggle nav caret>Volume</DropdownToggle>
                            <DropdownMenu>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/highest/volume")}>Highest</DropdownItem>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/lowest/volume")}>Lowest</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </ul>
                </div>
            </Nav>

Can you post the actual rendered HTML instead of ` this.handleNavClick(url)}/>`? — Carol Skelly, Mar 28 '18 at 13:08
You shouldn't have a `container` nested in a column. What have you tried to center it? There are many different ways: https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment — Carol Skelly, Mar 28 '18 at 13:29

score 0 · Answer 1 · edited Mar 28 '18 at 20:09

0

You could center it with css

#svgspin{
  width:150px;
  margin:0 auto;
}

edited Mar 28 '18 at 20:09

kilojoules

9,768
18
77
149

answered Mar 28 '18 at 13:25

bryanfeller

336
4
8

Why is my loading spinner not being centralised bootstrap 4

1 Answers1