html5 - How do I align columns in the center of the page? -
this question has answer here:
- center column using twitter bootstrap 3 28 answers
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
Post a Comment