Центр контейнера в контейнере-жидкости

Question

Я хочу центрировать контейнер внутри контейнера-жидкости, но не могу заставить его работать

/* Setup Buttons Sepcific Styling */
.setup-bg {
  background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid setup-bg my-auto">
        <div class="container my-auto">
            <h3 class="h3 white my-5 text-center justify-content-center">
                A simple tool for you to create your own social share bar.
                <br> Click the social media icons to add them to your bar</h3>
            <div class="row button-row justify-content-center">
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_facebook-btn" width="150"></a>
                        <input type="checkbox" name="facebook" value="facebook">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_linkedin-btn" width="150"></a>
                        <input type="checkbox" name="linkedin" value="linkedin">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_twitter-btn" width="150"></a>
                        <input type="checkbox" name="twitter" value="twitter">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_pocket-btn" width="150"></a>
                        <input type="checkbox" name="pocket" value="pocket">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_copy-btn" width="150"></a>
                        <input type="checkbox" name="copy" value="copy">
                    </label>
                </div>
            </div>
            <div class="row text-center my-5">
                <div class="col-12">
                    <button class="btn btn-primary fs_btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="getShareButtonsCode()">Setup social share buttons</button>
                </div>
            </div>
        </div>
    </div>

Здесь, над фрагментом, как я могу расположить текст по центру с помощью кнопок, чтобы поместить этот контейнер-жидкость?

Answer 1

Положитесь на flexbox , так как это V4 начальной загрузки.Просто добавьте d-flex flex-column к container-fluid.

Я также удалил некоторые бесполезные классы и исправил некоторые из них (в V4 больше нет col-xs-*)

/* Setup Buttons Sepcific Styling */

.setup-bg {
  background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid setup-bg d-flex flex-column">
  <div class="container my-auto">
    <h3 class="h3 white my-5 text-center">
      A simple tool for you to create your own social share bar.
      <br> Click the social media icons to add them to your bar</h3>
    <div class="row button-row justify-content-center text-center">
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_facebook-btn" width="150"></a>
                        <input type="checkbox" name="facebook" value="facebook">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_linkedin-btn" width="150"></a>
                        <input type="checkbox" name="linkedin" value="linkedin">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_twitter-btn" width="150"></a>
                        <input type="checkbox" name="twitter" value="twitter">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_pocket-btn" width="150"></a>
                        <input type="checkbox" name="pocket" value="pocket">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_copy-btn" width="150"></a>
                        <input type="checkbox" name="copy" value="copy">
                    </label>
      </div>
    </div>
    <div class="row text-center my-5">
      <div class="col-12">
        <button class="btn btn-primary fs_btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="getShareButtonsCode()">Setup social share buttons</button>
      </div>
    </div>
  </div>
</div>