html - How come one of my columns in bootstrap is not functioning properly? -
html - How come one of my columns in bootstrap is not functioning properly? -
i making site high school robotics team , new html , css. how come 1 of columns (the melanie aguilar one) not functioning others?
site - robotichive3774.com
<!doctype html> <html> <head> <title>robotics team 3774 home</title> <!-- link stylesheet --> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/index1.css"> <!-- mobile scaling --> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-------------------- uniform code -------------------------> <!-- navbar --> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/home">team 3774</a> </div> <div class="navbar-collapse collapse" style="height: 0.866667px;"> <ul class="nav navbar-nav"> <li><a href="/team bio">team bio</a></li> <li><a href="/our robot">our robot</a></li> <li><a href="/our coach">our coach</a></li> <li><a href="/gallery">gallery</a></li> <li><a href="/outreach">outreach</a></li> <li><a href="/youtube">youtube</a></li> </ul> </div> </div> </div> <!-- banner --> <div id="top-jumbotron" class="jumbotron"> <img src="/images/banner.png" class="img-responsive" alt="responsive image"> </div> <!-----------------------------------------------------------> <div class="jumbotron"> <h1>team 3774 fellow member bio</h1> <p>here can find links every fellow member info on each of them.</p> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="bubble"> <h2>abanoub boules</h2> <p>team captain, engineer, coder</p> <a href="/team bio/abanoub.html" type="button" class="btn btn-default">read more</a> </div> </div> <div class="col-md-4"> <div class="bubble"> <h2>andre bernardo</h2> <p>head engineer, assistant captain</p> <a href="/team bio/andre.html" type="button" class="btn btn-default">read more</a> </div> </div> <div class="col-md-4"> <div class="bubble"> <h2>leo scarano</h2> <p>head coder, head web-master</p> <a href="/team bio/leo.html" type="button" class="btn btn-default">read more</a> </div> </div> <div class="col-md-4"> <div class="bubble"> <h2>kristen kaldas</h2> <p>coder, head documenter</p> <a href="/team bio/abanoub.html" type="button" class="btn btn-default">read more</a> </div> </div> <div class="col-md-4"> <div class="bubble"> <h2>anish patel</h2> <p>engineer, head 3d modelling</p> <a href="/team bio/abanoub.html" type="button" class="btn btn-default">read more</a> </div> </div> <div class="col-md-4"> <div class="bubble"> <h2>andrew wojtkowski</h2> <p>coder, web-master, engineer</p> <a href="/team bio/abanoub.html" type="button" class="btn btn-default">read more</a> </div> </div> <div class="col-md-4"> <div class="bubble"> <h2>furhan ashraf</h2> <p>financial advisor, engineer</p> <a href="/team bio/abanoub.html" type="button" class="btn btn-default">read more</a> </div> </div> <div class="col-md-4"> <div class="bubble"> <h2>kenneth rebbecke</h2> <p>engineer, documenter</p> <a href="/team bio/abanoub.html" type="button" class="btn btn-default">read more</a> </div> </div> <div class="col-md-4"> <div class="bubble"> <h2>mina hanna</h2> <p>engineer, coder</p> <a href="/team bio/abanoub.html" type="button" class="btn btn-default">read more</a> </div> <div class="col-md-4"> <div class="bubble" id="special"> <h2>melanie aguilar</h2> <p>secretary, mascot</p> <a href="/team bio/abanoub.html" type="button" class="btn btn-default">read more</a> </div> </div> </div> </div> </body> </html> #top-jumbotron { padding-left:0; padding-right:0; padding-bottom:0; margin-bottom: 0; } body { background-color: #e8e8e8; } .bubble { background-color: #ffffff; padding: 20px; width: 95%; height: 175px; border-radius: 15px; margin-top: 10px; margin-bottom: 10px; } #special { float: left; }
you're missing /div - notice have div within div, remember need close both. utilize netbeans html , tell if there problem. if on mac, told komodo good, too. editing programme life saver!
fixed code:
<div class="col-md-4"> <div class="bubble"> <h2>mina hanna</h2> <p>engineer, coder</p> <a href="/team bio/abanoub.html" type="button" class="btn btn-default">read more</a> </div> </div> <!-- one! --> edit there few things wrong code , michael points 1 out - says, bootstrap grid. imagine (i draw usually) box split 12 columns. every row div, should have columns add together 12 within it. can break , still work because div overflow , move down, it's not best practice. if fixing missing div end tag doesn't work, seek fixing row construction adds 12 columns across page
html css twitter-bootstrap
Comments
Post a Comment