All geek questions in one place

Bootstrap: how to place an element horizontally anywhere in the grid?

I am learning Bootstrap. I am using Bootstrap for a fixed-width design. From the online documentation, I know that it's easy to post items starting from a column. For instance:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap version</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } </style> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <link href="learn.css" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="span3" style="background-color:grey">span3</div> <div class="span5" style="background-color:pink"><div id="text">span5 text</div></div> <div class="span4" style="background-color:navy">span4</div> </div> </div> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/bootstrap.min.js"></script> </body> </html>

In the example above

 <div id="text">span5 text</div>

horizontally begins where the fourth column begins. I would like to know how Bootstrap expert users use CSS to host

 <div id="text">span5 text</div>

so that it starts between the third and fourth columns or ends between the eighth and ninth columns.

I am thinking about using:

 <style> #text { margin-left:-10px; } </style>

or

 <style> #text { position:relative; left:-10px; } </style>

to position the div, but not sure if this is preferable, and would like to know what the experts are doing and some other ways.

Thanks!

+4
source share
2 answers

By default, there is always always a left (or gutter) marker (between Bootstrap channels) (see here http://bootply.com/64463 ). If you want to override this, this is possible with CSS, but then you will lose the responsive benefits of Bootstrap because the element will be removed from the normal page stream.

A better option would be a custom Bootstrap build without drainage: http://twitter.imtqy.com/bootstrap/customize.html#variables

Or you can create your own CSS class that you apply to strings as needed, as this lossless example: http://bootply.com/61712 p>

+3
source

I am using this solution that works for me:

 <div class="jumbotron" style="height:100%;"> <div> <table style="height:100%;width:100%"> <thead> <tr> <td> <div class="row"> <div class="col-md-6"> head 1 </div> <div class="col-md-6"> head 2 </div> </div> </td> </tr> </thead> <tbody> <tr> <td> <div class="row"> <div class="col-md-6"> body 1 </div> <div class="col-md-6"> body 2 </div> </div> </td> </tr> </tbody> <tfoot> <tr> <td> <div class="row"> <div class="col-md-6"> foot 1 </div> <div class="col-md-6"> foot 2 </div> </div> </td> </tr> </tfoot> </table> </div>

enter image description here

+1
source

Source: https://habr.com/ru/post/1485921/

More articles:


All Articles