html5 - How do I align columns in the center of the page? -


this question has answer here:

how align columns go in center of page? columns aligning left need them centered in middle of page im using css3, html5 , bootstrap v3.3.4

<section id="about-us" class="about-us">     <div class="container-fluid">         <div class="row">             <div class="col-md-3 col-sm-3">                 <div class="block wow fadeinright" data-wow-delay=".3s" data-wow-duration="900ms">                     <h2>one</h2>                 </div>             </div>             <div class="row">                 <div class="col-md-3 col-sm-3">                     <div class="block wow fadeinright" data-wow-delay=".6s" data-wow-duration="900ms">                         <h1>one</h1>                         <h1>two</h1>                         <h1>three</h1>                         <h1>four</h1>                         <h1>five</h1>                         <h1>six</h1>                     </div>                 </div>             </div>         </div>     </div> </section> 

css

.about-us {     background-image:linear-gradient(rgba(18, 172, 234, 0.42),     rgba(0, 191, 255, 0.55)),url(background-about-header.png);     background-size: cover;     background-attachment: scroll;     color: #fff;     position: relative;     background-position: center;     overflow: hidden;     height: 100vh; }  #about-us h1 {     font-size: 400%;     font-weight: 400;     text-transform: none;     color: #666;     text-align: justify;     margin: auto; }   .about-us h2 {     font-size: 750%;     font-weight: 400;     text-transform: uppercase;     color: #666;     line-height: 80px;     padding-top: 120px;     margin: auto; }  #about-us .block {     position: relative;     padding: 310px 0px 0px;     text-align: center;     margin: auto; } 

you want use twitter bootstraps .col-md-offset-* classes. here documentation. want add offset furthest left column move div on amount of columns define, example html this:

<section id="about-us" class="about-us">     <div class="container-fluid">         <div class="row">             <div class="col-md-3  col-md-offset-3 col-sm-3 col-sm-offset-3"> //see here added 2 offset classes                  <div class="block wow fadeinright" data-wow-delay=".3s" data-wow-duration="900ms">                     <h2>one</h2>                 </div>             </div>             <div class="row">                 <div class="col-md-3 col-sm-3">                     <div class="block wow fadeinright" data-wow-delay=".6s" data-wow-duration="900ms">                         <h1>one</h1>                         <h1>two</h1>                         <h1>three</h1>                         <h1>four</h1>                         <h1>five</h1>                         <h1>six</h1>                     </div>                 </div>             </div>         </div>     </div> </section> 

Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -