在HTML5中添加引导网格系统

Question

<main>    
    <section id="slide-1" class="homeSlide">
      <div class="bcg">   
        <div class="hsContainer">
        <div class="hsContent" data-center="bottom: 200px; opacity: 1"
                data-top="bottom: 1200px; opacity: 0"
                data-anchor-target="#slide-1 h2">
          <h2>Item1</h2>

        </div>
        </div>
      </div>
    </section>

    <section id="slide-2" class="homeSlide">
        <div class="bcg">
            <div class="hsContainer">
                <div class="hsContent"
                    data-center="opacity: 1"
                    data-center-top="opacity: 0"
                    data--100-bottom="opacity: 0;"
                    data-anchor-target="#slide-2"
                >
                <h2>Item2</h2>
              </div>
              </div>
          </div>
    </section>

    <section id="slide-2" class="homeSlide">
        <div class="bcg">
            <div class="hsContainer">
                <div class="hsContent"
                    data-center="opacity: 1"
                    data-center-top="opacity: 0"
                    data--100-bottom="opacity: 0;"
                    data-anchor-target="#slide-2"
                >
                <h2>Item3</h2>
              </div>
              </div>
          </div>
    </section>
</main>

I have three sections under main tag. Its a parallax effect and each section takes the entire screen width.How will apply bootstrap's grid system here and make them responsive.

Answer 1

like this by adding container-full on main and row on each section

<main class="container-full">    
<section id="slide-1" class="homeSlide row">

bootply demo here