0

Im having some problems with layout of bootstrap. I have looked at the link below to find some details about the situation.

How can I get a Bootstrap column to span multiple rows?

However, i couldnt figure out how to fix this issue:

----------What i have----------

Picture current

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <!-- First row, directions -->
    <div class="row top-buffer">
        <div class="col-md-12">
            <br><br><br><br>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
            <br>
            <form class="form-inline">
                <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
                    <a class="btn btn-primary" href="results.html" role="button"> < </a>
                    <a class="btn btn-secondary  " role="button"> 1/3 </a>
                    <a class="btn btn-primary  " href="results.html" role="button"> > </a>
                </div>
            </form>
        </div>
        <div class="col-md-1">
        </div>
        <div class="row">

            <div class="col-md-4">
                <label class="checkbox-inline"><input type="checkbox" value=""></label>
                <label class="checkbox-inline"><input type="checkbox" value=""></label>
                <label class="checkbox-inline"><input type="checkbox" value=""></label>
                <br>
                <div class="form-group">
                    <label for="search">Search</label>
                    <input type="text" class="form-control" id="search">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-1"></div>
            <div class="col-md-4">
                <form class="form-inline">
                    <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
                        <a class="btn btn-primary" href="results.html" role="button"> < </a>
                        <a class="btn btn-secondary  " role="button"> 1/3 </a>
                        <a class="btn btn-primary  " href="results.html" role="button"> > </a>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-1">
        </div>
    </div>
</div>
</body>
</html>

----------What i want----------

picture wanted

*Note, the extended box (left) should fill the entire row

Community
  • 1
  • 1
MartW
  • 131
  • 1
  • 10

1 Answers1

0

You cannot span rows or columns as if them were tabe's. You should change your markup a little

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

      <style>
        .row { border: 1px solid #f00;}
          [class*="col-"] { border: 1px solid #0f0; }
        </style>

    <div class="container">
        <div class="row top-buffer">
            <div class="col-xs-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                <a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
                <br>
                <form class="form-inline">
                    <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
                        <a class="btn btn-primary" href="results.html" role="button"> < </a>
                        <a class="btn btn-secondary  " role="button"> 1/3 </a>
                        <a class="btn btn-primary  " href="results.html" role="button"> > </a>
                    </div>
                </form>
            </div>
            <div class="col-xs-1">
              &nbsp;
            </div>
                <div class="col-xs-4">
                    <label class="checkbox-inline"><input type="checkbox" value=""></label>
                    <label class="checkbox-inline"><input type="checkbox" value=""></label>
                    <label class="checkbox-inline"><input type="checkbox" value=""></label>
                    <br>
                    <div class="form-group">
                        <label for="search">Search</label>
                        <input type="text" class="form-control" id="search">
                    </div>
                    <form class="form-inline">
                        <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
                            <a class="btn btn-primary" href="results.html" role="button"> < </a>
                            <a class="btn btn-secondary  " role="button"> 1/3 </a>
                            <a class="btn btn-primary  " href="results.html" role="button"> > </a>
                        </div>
                    </form>
                </div>
        </div>
      </div>

I changed the columns from md to xs just to prevent them from going responsive inside the snippet frame.

Gabriel
  • 2,170
  • 1
  • 17
  • 20