CODEWITHSUNDEEP
htmltwitter-bootstrap-3
wang ted
wang ted

Reputation: 35

Bootstrap V3: grid system can't put two divs into one row

<!doctype html>
<html>
    <head>
        <title>OptimisedForum</title>
        <link rel="stylesheet" href="../Bootstrap/setup/css/bootstrap.min.css"/>
        <script src='../Bootstrap/setup/jquery-3.3.1.min.js'></script>
        <script src='../Bootstrap/setup/js/bootstrap.js'></script>
    </head>
    <body>
        <div class='container'>
            <form class="form-horizontal">               
                <div clas="form-group">
                    <div class="col-sm-12" style="background: #999;">
                        <textarea class="form-control" placeholder="comment here" rows = 5></textarea>
                    </div>      			
		            <div class="col-sm-4" style="background: yellow">
		            	<input type="text" class="form-control" id="inputPassword3" placeholder="username"/>
		            </div>
		            <div class="col-sm-8" style="background: red">
		            	<button type="submit" class="btn btn-default">Submit</button>
		            </div>
	            </div>
	        </form>
	        <div class="col-sm-12" style="background: #123">
		        <nav aria-label="Page navigation">
					<ul class="pagination">
					    <li class="page-item">
						    <a href="#" aria-label="Previous" class="page-link">
						    <span aria-hidden= "true">&laquo;</span>
						    </a>
					    </li>
						<li class="page-item"><a class="page-link" href="#">1</a></li>
						<li class="page-item"><a class="page-link" href="#">2</a></li>
					    <li class="page-item">
					        <a class="page-link" href="#" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					        </a>
					    </li>
				    </ul>
				</nav>
			</div>
		</div>
    </body>
</html>

enter image description here

As the picture shows, it is supposed that the 'submit' button can be on the same row with the 'username' input by the grid system but appearently it can't be anyway. I have tried many ways to do it such as putting these two divs into one '.row' etc but never work. So, I may need your guys' help. Thx

Upvotes: 0

Views: 55

Answers (1)

Aniket G
Aniket G

Reputation: 3512

  1. You didn't have bootstrap included (maybe you did, but you didn't in the snippet since you included it from a local file).
  2. You had col-sm-4 which means at the small breakpoint, it will apply. Of course, this screen is the big breakpoint. To make them on the same line, just remove the -sm (make it col-4). I fixed that in the snippet for you.
  3. You should always have the structure .container > .row > .col You skippet the .row

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html>

<head>
  <title>OptimisedForum</title>
  <link rel="stylesheet" href="../Bootstrap/setup/css/bootstrap.min.css" />
  <script src='../Bootstrap/setup/jquery-3.3.1.min.js'></script>
  <script src='../Bootstrap/setup/js/bootstrap.js'></script>
</head>

<body>
  <div class='container'>
    <form class="form-horizontal">
      <div clas="form-group">
        <div class="row">
          <div class="col-12" style="background: #999;">
            <textarea class="form-control" placeholder="comment here" rows=5></textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-4" style="background: yellow;">
            <input type="text" class="form-control" id="inputPassword3" placeholder="username" />
          </div>
          <div class="col-8" style="background: red;">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </div>
      </div>
    </form>
    <div class="col-12" style="background: #123">
      <nav aria-label="Page navigation">
        <ul class="pagination">
          <li class="page-item">
            <a href="#" aria-label="Previous" class="page-link">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions