Содержимое центра в контейнере Bootstrap-жидкость

Question

В контейнере-флюиде у меня есть контент, как сделать этот контент центру, используя любой класс начальной загрузки. Я могу использовать поля и отступы, но я не хочу использовать это. Пожалуйста, помогите достичь этого.

Это App.js

import React, { Component } from 'react';
import './App.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSuitcase } from '@fortawesome/free-solid-svg-icons';


class App extends Component {
  render() {
    return (
      <div className='container-fluid customcolor'>
        <div className='row'>
          <div className='icon'>
            <FontAwesomeIcon className='suitcasestyle fa-5x' icon={faSuitcase}></FontAwesomeIcon>
          </div>
          <div className='text'>
            <h1>Job Application</h1>
            <h3>Please complete the form below to apply for a position with us.</h3>
          </div>
        </div>
      </div>
    )
  }
}

export default App

Это App.css

.customcolor {
  background-color: red;
}

Answer 1

Если вам нужно выровнять текст по центру, вам нужно добавить класс text-center к container-fluid div.

Если вам нужно выровнять содержимое внутри, вам нужно добавить класс justify-content-center ксоответствующий ряд. В противном случае вам понадобится еще одна оболочка div вокруг строк.

Например: <div className="d-flex justify-content-center">...</div>

d-flex.

Также row должны иметь дочерние элементы с классомcol или col-*

Я бы написал что-то вроде этого.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class='container-fluid customcolor text-center'>
  <div class='row justify-content-center'>
    <div class="col-auto">

      <div class='text'>
        <h1>Job</h1>
        <h3>Please comp.</h3>
      </div>
    </div>
  </div>
</div>

Обратитесь к документам по начальной загрузке для получения дополнительной информации