在页面的左侧和右侧显示自举井

Question

I use bootstrap wells to resemble cards. I currently have two different types of cards, the "normal" ones which will be in the middle of the screen, and the "special" ones which will be on the left and right side.

Template I'm trying to replicate:

Issues:

1.) It seems like the wells in bootstrap don't want to go to the very left or right of a page. They seem to always be contained in an invisible div/border and won't go anywhere else unless absolute positioning is used. I can't use absolute positioning because the middle content overlaps it if zoomed in. It gets rid of the responsive aspect of bootstrap which needs to stay.

2.) Without the use of absolute positioning, making new "special" cards on the side will add extra vertical space which will sink the middle content down the page

 body { background-color: #5C67B6; } html, body { height: 100%; padding-top: 70px; } .btn-purple { color: #fff; background-color: #5C67B6; border-color: #5C67B6; position: absolute; bottom: 30px; left: 50%; margin-left: -140px; } .btn-info { color: #fff; background-color: #5C67B6; border-color: #5C67B6; position: absolute; bottom: 30px; right: 10%; margin-left: 140px; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info { color: #fff; background-color: #4b5496; border-color: #4b5496; } .btn-purple:hover, .btn-purple:focus, .btn-purple:active, .btn-purple.active, .open>.dropdown-toggle.btn-purple { color: #fff; background-color: #4b5496; border-color: #4b5496; } .customClass { width: 700px; max-width: 100%; margin: 0px auto; } .turbo { background: #7280e5; color: white; border-color: #4b5496; } .well { min-height: 320px; max-height: 320px; height: auto; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } .well:hover { background: #7280e5; color: white; border-color: #4b5496; } .well p { margin-bottom: 50px; } .header { display: inline-block; width: 100%; border: 1px solid red; } .playerOne { float: right; text-align: center; width: 300px; border: 5px solid #dadada; background-color: #dadada; border-radius: 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0px 0px 15px #5dbcd2; -moz-box-shadow: 0px 0px 15px #5dbcd2; box-shadow: 0px 0px 15px #5dbcd2; } .playerTwo { float: left; text-align: center; width: 300px; border: 5px solid #dadada; background-color: #dadada; border-radius: 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0px 0px 15px #5dbcd2; -moz-box-shadow: 0px 0px 15px #5dbcd2; box-shadow: 0px 0px 15px #5dbcd2; } @media only screen and (max-width: 900px) { .playerOne { width: 650px; } .playerTwo { width: 633px; } } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="header"> <div class="playerOne"> Special Cards </div> <div class="playerTwo"> Special Cards </div> </div> <center> <div class="input-group" style="width: 500px; padding-bottom: 2cm;"> <input type="text" class="form-control" placeholder="Search cards!"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> <!-- /input-group --> </center> <div class="content"> <div class="container content-sm customClass"> <div class="row"> <center> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a aria-label="Previous" href="#"><span aria-hidden="true">&laquo;</span></a> </li> <li class="active"> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4</a> </li> <li> <a href="#">5</a> </li> <li> <a aria-label="Next" href="#"><span aria-hidden="true">&raquo;</span></a> </li> </ul> </nav> </center> <div class="col-sm-6 col-xs-12"> <div class="well"> <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> <h3 style="text-align: center;">Card</h3> <p>This is Text. This is Text. This is Text. </p> <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="well"> <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> <h3 style="text-align: center;">Card</h3> <p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p> <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="well turbo"> <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> <h3 style="text-align: center;">Card</h3> <p>This is Text. This is Text. This is Text. </p> <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="well"> <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> <h3 style="text-align: center;">Card</h3> <p>This is Text. This is Text. This is Text. </p> <a href="#" class="btn btn-purple btn-sm" style="vertical-align: bottom;"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="well"> <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> <h3 style="text-align: center;">Card</h3> <p>This is Text. This is Text. This is Text. This is Text. </p> <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button</a> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="well"> <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> <h3 style="text-align: center;">Card</h3> <p>This is Text. This is Text. This is Text. This is Text. </p> <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a> </div> </div> </div> </div> </div> 

I've tried using a flexbox and putting the wells in there which seemed to work until i zoomed in and noticed it was no longer responsive and overlapped the other content.

What is the best and most efficient way of adding wells to the left and right side of the page without adding unnecessary whitespace and maintaining responsiveness?

Answer 1

You can try with below example to get the same use col-xx-offset-xx bootstrap's classes

I posted a working example

You can use container-fluid instead of container .

 .box { border: 1px solid; width: 100%; height: 100px; margin: 0px 0px 10px 0px; } 

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-2"> <div class="box"> </div> </div> <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2"> <div class="box"> </div> </div> <div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2"> <div class="box"> </div> </div> </div> <div class="row"> <div class="col-lg-2 col-md-2"> <div class="box"> </div> </div> <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2"> <div class="box"> </div> </div> <div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2"> <div class="box"> </div> </div> </div> </div> 

Working codepen - codepen

Answer 2

I've no idea how to do it with fixed sizes, css is hard.

 body { padding-top: 20px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <div class="well">header row</div> </div> </div> <div class="row"> <div class="col-lg-3"> <div class="well">x-well</div> <div class="well">x-well</div> <div class="well">x-well</div> <div class="well">x-well</div> </div> <div class="col-lg-6"> <div class="well"> sample text </div> <div class="row"> <div class="col-sm-6"> <div class="well">x-well</div> <div class="well">x-well</div> <div class="well">x-well</div> <div class="well">x-well</div> </div> <div class="col-sm-6"> <div class="well">x-well</div> <div class="well">x-well</div> <div class="well">x-well</div> <div class="well">x-well</div> </div> </div> </div> <div class="col-lg-3"> <div class="well">x-well</div> <div class="well">x-well</div> <div class="well">x-well</div> <div class="well">x-well</div> </div> </div> </div>