I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row">
<div class="span12">c</div>
</div>
</div>
</body>
</html>
style.css:
div.container
{
background-color:#aaa;
}
div.span4, div.span8, div.span12
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
Adding border to span4 and span8 increases their width and I end up with this:
span4 and span8 get stacked while they should be on the same line. I realize I could decrease their width in my .css file and correct this, or use this:
http://paulirish.com/2012/box-sizing-border-box-ftw/
but does Bootstrap provide means to correct this (not adding extra CSS every time I add or remove border, etc)
The span classes in bootstrap have specific widths so adding a border throws off the total for the row and forces them to wrap. To get around this I usually put the border styling on a div inside the div with the span class. Something like this:
HTML
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
CSS
.span4 > div, .span8 > div
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
I had exactly the same issue and playing with the box-sizing didn't help at all. The only solution that worked for me in the end was to use row-fluid.
The difference with row-fluid is that they are based on percentages, not fixed pixels. Then the child spans in a row always add up to 12, instead of adding up to their parent span width in the normal pixel width rows.
So for example yours would now be
<div class="container">
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row-fluid">
<div class="span12">c</div>
</div>
</div>
Now you don't get any issues with changing margins, paddings, or borders.
It sounds like you want your divs to stay on the same line, yes? To do that you'll have to specify a width and float them. Divs tend to always want to stack on top of each other.
Here's a fiddle: http://jsfiddle.net/me73v/
Another option would be to tweak the span widths with JQuery:
$(".some-bordered-container [class*=span] ").each(function(index) {
$(this).width($(this).width()-1);
});
It seems to work well for me. I don't miss the pixels.
You may also use negative margins :
div.span4, div.span8, div.span12
{
background-color: #eee;
border: 1px solid #888;
border-radius: 3px;
margin: -1px;
}
It's not as good a solution as using box-sizing: border-box, IMHO, but it's just worth noticing it works, if you're forced to use box-sizing: content-box.
Related
I want to align an image, a title and a text block responsively using the bootstrap layout classes.
For the sm/xs breakpoint the title is supposed to be aligned next to the image in the top left corner, the text in full width (12col) underneath.
For the md breakpoint the text should align beneath the title but next to the image.
Here's a example image of the desired layout.
I assigned a col for each element in one row.
if I assign more than 12 column widths and push down the third column (text) with an offset, it will be aligned in a second row, while I want it to share the height of the image.
My brain hurts, thanks a lot for help and hints in any directions!
This is one of the many html sceletons I tried
<div class="container">
<div class="row">
<div class="image col-sm-6 col-md-6"></div>
<div class="title col-sm-6 col-md-6"></div>
<div class="text col-sm-12 col-md-6 col-md-offset-6"></div>
</div>
</div>
Here you go...
I suggest you to make two text boxes (i.e., text_1 and text_2). Use Bootstrap classes to show/hide them depending on the viewport width. To do so, apply d-md-block d-none to the text_1 and d-md-none d-block to the text_2.
See the snippet below.
#image {
background-color: greenyellow;
height: 200px;
}
#title {
background-color: gold;
height: 30px;
}
#text_1,
#text_2 {
background-color: red;
}
#text_2 {
height: 200px;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<div class='container-fluid'>
<div class='row d-flex justify-content-between mb-3'>
<div class='col-6' id='image'>Image</div>
<div class='col-6 pe-0'>
<div class='col-6 w-100 mb-3' id='title'>Title</div>
<div class='col-6 w-100 h-75 d-md-block d-none' id='text_1'>Text</div>
</div>
</div>
<div class='row'>
<div class='col-12 d-md-none d-block' id='text_2'>Text</div>
</div>
</div>
</body>
</html>
if i have:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
Some Element....
</div>
<div class="span4">
Other Element
</div>
</div>
</div>
With this code i have some margin from left and right window borders. How can eliminate these margins?
Thanks for your support
If i understand your question correctly, I believe you want this:
.container-fluid {
padding: 0px;
}
Also if you are using responsive bootstrap you will also want this:
#media (max-width: 797px) {
body {
padding-left: 0px;
padding-right: 0px;
}
}
Edit: here is a js fiddle.
The effect you are seeing is because of the container’s padding.
You can change the container’s default padding with the built-in Bootstrap 4 spacing utility classes.
To remove the padding, add p-0 to the container:
<div class="container-fluid p-0">
<div class="row">
<div class="col-8">
Some Element....
</div>
<div class="col-4">
Other Element
</div>
</div>
</div>
Using the built-in utility classes has the benefit of keeping your CSS lean and it also does not modify the default container-fluid class definition.
I have a problem with div positioning in my form. My page contains a sheet. With div layout as below.
In divs on the left side, there are description of the fields. (they share the same style class)
In divs on the right side, there are the fields. (they share the same style class)
After validation my page look like this:
But I want it to look like this:
Honestly, I thought how do deal with it, for quite a white, and I simlpy have no idea what to do it. My page is almost ready so I'd like to fix that with possible at low cost.
[edit1]:
My current css look simple, something like this:
div_on_left{
clear: both;
float: left;
width: 440px;
padding-top: 5px;
padding-bottom: 8px;
}
div_on_right{
float: left;
width: 500px;
padding-top: 3px;
padding-bottom: 6px;
}
[edit2]:
I have just found one solution (posted below), but I don't like it. It will crash if context of divs on the left is too big. That's due to
position:absolute;
So I'd like to avoid this property.
<html>
<head>
<style type="text/css">
.row
{
position:relative;
}
.left
{
font-size:100%;
position:absolute;
left:0px;
bottom:0px;
}
.right
{
font-size:200%;
position:relative;
left:150px;
bottom:0px;
}
</style>
</head>
<body>
<div class="row">
<div class="left">Left_1</div>
<div class="right">Right_1</div>
</div>
<div class="row">
<div class="left">Left_2</div>
<div class="right">Right_2</div>
</div>
<div class="row">
<div class="left">Left_3</div>
<div class="right">Right_3</div>
</div>
</html>
It have to be a common problem. How do you deal width forms with validation that apear over the field boxes?
There's a solution for your problem but it involves a table-cell layout. The layout must have a row and two inner cells aligned to the bottom.
Here is a JSFiddle Example: http://jsfiddle.net/cvbLC/
I'm not aware of which browser support you are needing, but here is more information about this matter: http://www.quirksmode.org/css/display.html
I am trying to get two elements to sit side by side inside a div or other element, so both two elements are always centered in the page.
Here's the catch... I cannot use any fixed widths, it is dynamically generated by javascript. It would seem that from reading other posts that this is not possible without fixed widths, but I wanted to see if any one had any other ideas to achieve the same result.
HTML:
<body>
<div class="centerdiv">
<div class = float1></div>
<div class = float2></div>
</div>
</body>
CSS:
body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%}
div.float1 {float:left; display:inline;}
div.float2 {float:left; display:inline;}
You can use the follwing code to center the div side by side.
<html>
<head>
<style type="text/css">
body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%;margin-left:40%;}
.float1{border:1px solid black;width:10%;float:left;}
</style>
</head>
<body>
<div class="centerdiv">
<div class = float1>Hello</div>
<div class = float1>Hai</div>
</div>
</body>
</html>
Hope this helps!!!!!!
I have a site with a right sidebar and a left main content area. Code looks like this:
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
with
.leftside
{
float:left;
width:710px;
}
.rightside
{
margin-left:720px;
}
(see actual site at http://blog.stephenkiers.com/)
Reason it is coded this way is so that because the leftsidecontent is important and I want to be first data accessed by visually impaired visitors; instead of them having to skip all the fluff every time!
The code works in FF, IE8, Safari etc; but in IE7 the rightside divs clear the floated divs.
I would love any suggestions you may have. I have some ideas about how to fix it; but they all involve pretty big rewrites.
thanks!
why don't you try wrapping the content stuff into two columns like this example
The CSS:
.leftside {
float:left;
width:710px;
}
.rightside {
float: left;
margin-left: 20px;
}
.contentBlock { margin-bottom: 10px; background: #ccc; padding: 8px; }
The HTML:
<div class="leftside">
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
</div>
<div class="rightside">
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
</div>
This way the leftside and rightside are just layout elements and are isolated from the content.
Another good tip for visually impaired visitors is to have links at the top of the page to allow users to skip directly to content sections and hide them from your layout with css:
.skipToLinks { position: absolute; top: -100px;}