Just started playing around with bootstrap 3 and I can't get gutters between columns to work.
I created the most basic code to test with:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"> </script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<style>
.box1 {
background-color: green;
}
.box2 {
background-color: blue;
}
</style>
</head>
<div class="container">
<div class="row">
<div class="col-lg-4 box1">
<h1>Test</h1>
</div>
<div class="col-lg-8 box2">
<h1>Test2</h1>
</div>
</div>
</div>
</html>
And the result is just one big green/blue box without any gutter in between the two columns.
I have also tried it on a fiddle with no luck http://jsfiddle.net/Tgkkb/
What am I missing?
Bootstrap 3 switched to using padding for the gutters rather than margins. So, the content is parted, but the boxes aren't. And a background-color will fill the padding as well.
Though, you should be able to get the desired effect by setting the background on inner boxes:
<div class="row">
<div class="col-sm-4">
<div class="box1">
<h1>Test</h1>
</div>
</div>
<div class="col-sm-8">
<div class="box2">
<h1>Test2</h1>
</div>
</div>
</div>
http://jsfiddle.net/PFxUk/
Though, the goal is just to apply the background to a single, wrapping child. So, if the headers definitely won't have any siblings, then you can possibly forgo the additional <div>s:
<div class="row">
<div class="col-sm-4">
<h1 class="box1">Test</h1>
</div>
<div class="col-sm-8">
<h1 class="box2">Test2</h1>
</div>
</div>
http://jsfiddle.net/G2gbG/
If you want to set the padding or margin for your columns, you can use the row-no-gutters class on the row (introduced in v3.4.0) and add your own padding and background.
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
Related
I am using Bootstrap in a project of mine. I am making divs inside columns but they are not apreading acrosss the full-width of the columns.
This is a sample code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style type="text/css">
.col{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
<div class="blue" style="background-color: blue;">
1 of 3
</div>
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
</body>
</html>
My question is simple:
"How do I make my <div class="blue"> across 100% width of the original column?"
I also tried setting width to 100%.
UPDATE
I used <div class="row no-gutters"> instead of <div class="row"> and removed the container-fluid. Worked like a charm
you have to use this class in row
"row no-gutters justify-content-md-center"
You want each div to take up 100% of the column? if so, your divs are currently set to col-2, perhaps you should set them to col-12 (with the desired viewport prefix, lg, md, etc...)
This sounds like a CSS issue. By default, columns in the Bootstrap Grid System have 100% width.
My only recommendation would be to check your CSS for the "blue" class. It would need to be:
.blue{
margin: 0px;
...
}
I would also try changing the following in your HTML
<div class="row justify-content-md-center">
to just
<div class="row">
and set the justify-content in your CSS file and see if that helps
I have this order in my grid when it's a normal sized computer screen:
{1}{2}
{3}{4}
{5}{6}
When i make the screen smaller i want it to reorder, but it doesn't reorder correctly.
Actual:
{1}
{2}
{3}
{4}
{5}
{6}
Wanted:
{1}
{3}
{5}
{2}
{4}
{6}
What kind of CSS formatting do I have to use to achieve the wanted display of my elements.
Current CSS:
.general {
background-color: pink;
order: 1;
}
.anonymous{
background-color: aqua;
order:4;
}
.dead{
background-color: blue;
order: 2;
}
.dead-and-archived {
background-color: green;
order:5;
}
.created {
background-color: yellow;
order:3;
}
.private {
background-color: red;
order:6;
}
Current HTML:
<div class="container-fluid">
<div class="row">
<div class="general col-sm-4" >
General
</div>
<div class="anonymous col-md-8">
Anonymous
</div>
</div>
<div class="row">
<div class=" dead col-md-4">
Dead entities
</div>
<div class=" dead-and-archived col-md-8">
Dead and archived
</div>
</div>
<div class="row">
<div class="created col-md-4 ">
Created entities
</div>
<div class="private col-md-8">
private user repos
</div>
</div>
</div>
What you should do is just change the way you put your content in divs.
Unless your HTML is set in stone, the most obvious way to get what you want is to structure your HTML so that it facilitates what you want.
If you want
{{1},{4}}
{{2},{5}}
{{3},{6}}
You shouldn't do
{{1},{2}}
{{3},{4}}
{{5},{6}}
Change your html so that it looks like this at a structural level:
<div class="column">
<div class="row">
square 1
</div>
<div class="row">
square 2
</div>
<div class="row">
square 3
</div>
</div>
<div class="column">
...
</div>
Now use CSS to give the columns a width so that they are next to eachother, and when you use a mobile device, the right one is placed under the left one.
The alternative way to do this is to add responsive css rules that apply absolute positioning, but really, that is just a nasty way to accomplish what you want.
I hope this will be helpful:
N.B. feel free to change the classes value according with your needs
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12">1</div>
<div class="col-xs-12">3</div>
<div class="col-xs-12">5</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12">2</div>
<div class="col-xs-12">4</div>
<div class="col-xs-12">6</div>
</div>
</div>
</body>
</html>
The row class in bootstrap, when added to a div, should cause it to cover the entire width of the screen. It's working in most divs but seems to fail in some cases. Can someone point out my errors? I've tried reading the documentation. What have I missed?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>My Clock App</title>
<script src="knockout-3.2.0.min.js"></script>
<script src="jQuery.js"></script>
<script defer src="main.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="openBar" class="row">
<span id="openButton" data-bind="click: openNav">☰ open</span>
</div>
<div class="row">
<h1>My World Clock</h1>
</div>
<br>
<div data-bind="foreach: countries">
<div class="row throw">
<--adding row instead of col-md-12 causes issues-->
<div class="col-md-12">
<h3>Pikachu</h3>
</div>
<div class="col-md-2">
<h3 data-bind="text: name"></h3>
</div>
<div class="col-md-2">
<h5 data-bind="text: day"></h5>
<p data-bind="text: date"></p>
<p data-bind="text: time"></p>
</div>
<div class="col-md-2">
<h5 data-bind="text: capital"></h5>
<p data-bind="text: currency"></p>
<p data-bind="text: coor"></p>
</div>
<div class="col-md-2 languages" data-bind="foreach: lang">
<p data-bind="text: name"></p>
</div>
<div class="col-md-2 altName" data-bind="foreach: alts">
<p data-bind="text: $data"></p>
</div>
<div class="col-md-2 flag">
<img data-bind="attr:{src: imgSrc}">
</div>
</div>
</div>
</div>
</body>
</html>
It sounds like you're trying to nest a .row within a .row. .row elements have a negative left and right margin that matches the left and right padding of .col- elements. .col- elements should be the child elements of a .row. This allows the outside edge of the columns gutter to line up as expected.
Since you are attempting to .row you're going to have a total of -30px for the left and right margins, pulling your content to the outsides further than wanted.
Demo of double nested .row.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
<div class="row">
<div class="col-md-12">12 Columns</div>
</div>
<div class="row">
<div class="row">Row Row</div>
</div>
Notice that the second row should show Row Row, but it doesn't. The left negative margin pulls the first Row outside of the viewports view.
Since .row isn't simply a descriptive feature and applies styling with real consequences I suggest removing the class from the DIV.
I have looked over Bootstrap's documentation on the matter and tried different variations of their stuff, like using container instead of container-fluid, but I have not yet had success. I am simply trying to make two rows of text. The following displays on a single row, and I cannot figure out why. It appears like it should display two different rows, but this is not the case.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Rows</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-2"/>
<div class="col-md-2"><p>Apple1</p></div>
<div class="col-md-2"><p>Apple2</p></div>
<div class="col-md-2"><p>Apple3</p></div>
</div>
<div class="row">
<div class="col-md-offset-2"/>
<div class="col-md-2"><p>Apple4</p></div>
<div class="col-md-2"><p>Apple5</p></div>
<div class="col-md-2"><p>Apple6</p></div>
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
My wanted output is something along these lines:
Apple1 Apple2 Apple3
Apple4 Apple5 Apple6
Does anyone know why this is all staying in a single row?
I believe this is what you're after:
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-2"><p>Apple1</p></div>
<div class="col-md-1"></div>
<div class="col-md-2"><p>Apple2</p></div>
<div class="col-md-1"></div>
<div class="col-md-2"><p>Apple3</p></div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2"><p>Apple4</p></div>
<div class="col-md-1"></div>
<div class="col-md-2"><p>Apple5</p></div>
<div class="col-md-1"></div>
<div class="col-md-2"><p>Apple6</p></div>
<div class="col-md-2"></div>
</div>
</div>
bootply example
The offset should be used together with a grid class, like class="col-md-2 col-md-offset-2". Having an empty div with just an offset, like <div class="col-md-offset-2"></div> doesn't make much sense as it renders with no effect on the layout.
because you cannot end a div with / in the start tag, you have to end it with </div>
these are not ended <div class="col-md-offset-2"/> at the point you are expecting them to, but instead where the browser decides that they have to be to keep the DOM from breaking...
see fiddle : http://jsfiddle.net/DrCord/8sq9cb7s/
I'm using Bootstrap 3. I have two rows. The first row has 4x3 columns. The second row has one column of 3 and one column of 9. The column of 9 has twice the height of all the other columns. I would like a column added beneath the column of 3 on the second row. I have made an image to explain it.
Green is on one row and purple is on one row. I have tried to put yellow in it's own row, but then it is displayed on the left though but not against the bottom of the small purple block.
I have also put the small purple and yellow blocks on the same row but they get displayed next to each other with the 90 block underneath them.
why you don't follow this
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-9">
<div class="col-md-12"></div>
</div>
</div>
and later you could trick it with css
The Bootstrap grid system controls column width but not height. You can achieve your desired layout with the expected grid pattern and use height rules to make the bottom edge flush.
http://jsfiddle.net/rblakeley/ruggnzvq/
<html>
<head>
<title>Bootstrap grid example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style type="text/css">
div[class^="col"] { height: 40px; text-align: center; border: 1px dashed red; background: #fcc;}
.row:nth-child(2) div[class^="col"] { background: #cfc;}
.row:nth-child(2) > div[class^="col"]:first-child { border: none;}
.row:nth-child(2) > div[class^="col"]:nth-child(2) { height: 100px;}
.row:nth-child(2) .row div[class^="col"]:nth-child(2) { height: 60px; background: #ccf;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12">3</div>
<div class="col-xs-12">3</div>
</div>
</div>
<div class="col-xs-9">9</div>
</div>
</div>
</body>
</html>