html - Columns in row in bootstrap are not filling page width -


i have section of website has 2 rows inside container, both rows have 3 columns of class col-sm-4 , col-md-4. both rows have 1 image in each column. images same size @ 300px wide. top row displays accurately, bottom row condenses 3 columns , leave big area of wide space on right side. when using inspector, top row columns appearing class col-md-4, buttom row columns showing col-sm-4. i'm not sure if whats causing it. should mention top row columns have paragraphs below each image. when adding exact same paragraph content bottom row in 1 column, issue resolved, don't want paragraphs here. checked out bootstrap css , own try , find sore of style on <p> causing couldn't find anything. each row, , column have exact same css. code below:

html:

<div class="wrapper">         <div class="row customer-options">             <div class="button-container">                 <div class="col-sm-4 col-md-4">                     <img class="img-circle img-responsive img-center" src="images/button-icon-map2.png" alt="">                     <h2>title 1</h2>                     <p>these marketing boxes great place put information. these can contain summaries of company does, promotional information, or else relevant company. these below-the-fold.</p>                 </div>                 <div class="col-sm-4 col-md-4">                     <img class="img-circle img-responsive img-center" src="images/button-icon-pref2.png" alt="">                     <h2>title 2</h2>                     <p>the images set circular , responsive. fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. etiam porta sem malesuada magna mollis euismod. donec sed odio dui.</p>                 </div>                 <div class="col-sm-4 col-md-4">                     <img class="img-circle img-responsive img-center" src="images/button-icon-add2.png" alt="">                     <h2>title 3</h2>                     <p>donec id elit non mi porta gravida @ eget metus. fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. etiam porta sem malesuada magna mollis euismod. donec sed odio dui.</p>                 </div>             </div>         </div><!-- /.row -->     </div><!--wrapper-->      <hr>      <div class="wrapper">         <div class="row tap">             <div class="tap-container">                 <div class="col-sm-4 col-md-4">                     <img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">                     <h2><a href="">about</a></h2>                 </div>                 <div class="col-sm-4 col-md-4">                     <img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">                     <h2><a href="">services</a></h2>                 </div>                 <div class="col-sm-4 col-md-4">                     <img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">                     <h2><a href="">contact</a></h2>                 </div>             </div>         </div><!-- /.row -->     </div><!--wrapper-->

css:

.wrapper {     display: table; }  .button-container {     padding-right: 15px;     padding-left: 15px; }  .customer-options {     background-color: #848487;     padding-top: 20px;     height:100vh;     display: table-cell;     vertical-align: middle; }  .tap {     background-color: #848487;     padding-top: 20px;     height:100vh;     display: table-cell;     vertical-align: middle;     text-align: center; }  .tap-container {     padding-right: 15px;     padding-left: 15px; }  .customer-options h2 {     text-align: center; }

the display table , table-cell taking precedence on responsive image. tables fit content img-responsive fill new width. can find work around achieve vertical alignment recommend dropping table system , use bootstrap's grid system. can use flexboxes vertical alignment.

http://jsfiddle.net/28qq8fm3/

<style>     .customer-options {         background-color: #848487;         padding-top: 20px;         vertical-align: middle;     }     .tap {         background-color: #848487;         padding-top: 20px;         vertical-align: middle;         text-align: center;     }     .customer-options h2 {         text-align: center;     } </style>  <div>     <div class="row customer-options">         <div class="col-sm-4 col-md-4">             <img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">              <h2>title 1</h2>              <p>these marketing boxes great place put information. these can contain summaries of company does, promotional information, or else relevant company. these below-the-fold.</p>         </div>         <div class="col-sm-4 col-md-4">             <img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">              <h2>title 2</h2>              <p>the images set circular , responsive. fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. etiam porta sem malesuada magna mollis euismod. donec sed odio dui.</p>         </div>         <div class="col-sm-4 col-md-4">             <img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">              <h2>title 3</h2>              <p>donec id elit non mi porta gravida @ eget metus. fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. etiam porta sem malesuada magna mollis euismod. donec sed odio dui.</p>         </div>     </div>     <!-- /.row --> </div> <!--wrapper--> <hr> <div>     <div class="row tap">         <div class="col-sm-4 col-md-4">             <img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">              <h2><a href="">about</a></h2>          </div>         <div class="col-sm-4 col-md-4">             <img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">              <h2><a href="">services</a></h2>          </div>         <div class="col-sm-4 col-md-4">             <img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">              <h2><a href="">contact</a></h2>          </div>     </div>     <!-- /.row --> </div> <!--wrapper-->

Comments

Post a Comment

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

i'm trying link specific pdf page msoutlook'10 or msword'10, #page=... anchor particularly useful , works fine elsewhere. unfortunately when click [ctr-k] in outlook or winword, links re-formatted assuming unc path. pdf file located on shared drive. using "file:" prefix links open pdf in adobe reader (outside of browser), , "http:" open inside browser. issue seem need open in browser "file:" prefix in order anchor work. know anchors work inside browser. outlook uses windows/explorer default program (based on file extension) seems open in adobe reader neglecting anchor. is aware of solution, link specific page or bookmark of shared-pdf ms outlook and/or winword link? common references: mailermailer.com/...anchor-tags-html-emails campaignmonitor.com/...anchor-links-in-email-newsletters/ stackoverflow.com/...anchor-in-pdf-document
Read more

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

consider code: test = function() { } t = new test(); (var = 0; < 8; i++) { result = t instanceof test; } if change number of iterations 8 9 , loop take 100 times longer complete in latest version of firefox (41.0.1). tested on 2 different pcs , magic limit 8. here jsperf test used: http://jsperf.com/instanceof-8-times-vs-9-times does have idea why might happen? seems specific instanceof . not happen if else object, example check property. note: filed bugzilla bug this. jan de mooij mozilla team has posted details in bugzilla thread . here's simplistic interpretation of highly technical answers: in i < 8 case, firefox smart enough hoist result = t instanceof test; statement out of loop (according tests, doesn't seem omit altogether). in i < 9 case, apparently doesn't optimization . why? reason not clear, related fact 9 iterations threshold above function considered "hot" enough run through jit compiler. i < 8 cas...
Read more

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -

following this guide setup app on digital ocean droplet, not working. site not loading , it's throwing: "gateway time-out". the puma server works, since ps aux | grep puma prints: root 15878 0.0 0.4 376832 2168 ? sl 12:50 0:00 puma 2.13.4 (unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock) [20150930164940] root 15881 0.0 0.7 903676 3692 ? sl 12:50 0:06 puma: cluster worker 0: 15878 [20150930164940] root 24654 0.0 0.1 11748 916 pts/2 s+ 18:00 0:00 grep --color=auto puma my nginx config: user root; worker_processes 1; events { worker_connections 1024; } http { upstream puma { server unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock; } server { listen 80; server_name myapp.com; root /var/www/myapp/current/public; access_log /var/www/myapp/current/log/access.log; error_log /...
Read more