all.
This is driving me nuts. I have two rows within a Bootstrap container. The first row has a single column of col-8 length that contains a single input (A in screenshot). The second row has two columns with each column having a col-4 length and a single input (B and C in the screenshot). Intuitively, I would think the first input's right border would align with the second input's right border in the second row (since 8 = 4 + 4). Visually, this isn't the case (please see attached screenshot).
Screenshot
I am guessing the inputs in the second row have additional padding that makes their combined width different from the first input. What is the best way to make the first input's right border align with the right border of the second input in the second row? Many thanks in advance.
You should set margin-right:-30px to col-8 because yes 4+4=8 but the colums have 15px margins on the left and on the right;
I think there is something wrong with your grid code, check out this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Form Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8"><input type="text" class="form-control"></div>
</div>
<div class="row">
<div class="col-sm-4"><input type="text" class="form-control"></div>
<div class="col-sm-4"><input type="text" class="form-control"></div>
</div>
</div>
</body>
</html>
Check out these pages for better understanding of Bootstrap grid system and form layouts:
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php
Try check this
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="form-group">
<label>A</label>
<input class="form-control" type="text" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-2">
<div class="form-group">
<label>B</label>
<input class="form-control" type="text" />
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label>C</label>
<input class="form-control" type="text" />
</div>
</div>
</div>
</div>
</body>
</html>
Related
Consider this code:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<meta charset="UTF-8" />
<main class="container" id="main" style="max-width: 90%">
<div class="row" style="overflow: hidden">
<div class="col s12 m5 l5 xl5">
<form class="grey lighten-3">
<div class="input-field">
<textarea
id="textarea1"
class="materialize-textarea"
rows="18"
style="overflow-y: scroll; height: 20rem !important; max-height: 20rem"
></textarea>
<label for="textarea1">Input 1</label>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col s12 m5 l5 xl5">
<form class="grey lighten-3">
<div class="input-field">
<textarea
id="textarea2"
class="materialize-textarea"
rows="18"
style="overflow-y: scroll; height: 20rem !important; max-height: 20rem"
></textarea>
<label for="textarea2">Input 2</label>
</div>
</form>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Maybe it's not possible, but I have been trying to figure out how to put a lot of content in either of the textareas without increasing the height of the main body. If I put say 100 lines of content in "textarea2" this will create a large scrollable area of white space at the bottom of the page. I want to try and avoid this.
The tricky thing is that I do not want to disable scrolling on the main page. For instance if the bottom of the browser is moved up to cover half of "textarea2" then the main page will trigger a scrollbar so that it's possible to scroll down to see all of "textarea2" element. I do not want to disable that feature, just want to stop the textareas from creating stacks of unsightly whitespace.
EDIT: I should add that I am going to be using this with Electron, so doesn't need to work with other browsers.
I'm trying to create a virtual roulette wheel. Right now my concerns are strictly aesthetic. In the text-well on the right, the number in the #chipsInv won't center, except when I put an html "center" tag, and then for some reason it creates a huge amount of empty space at the bottom.
Here is my code, I've left out the Javascript since I assume it's irrelevant:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#ball {
position: absolute;
left: 208px;
top: 40px;
z-index: 1;
width: 20px;
height: 20px;
transition: top 1s;
}
#wheel {}
form {}
.row {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5">
<img id="ball" src="ball.png" onclick="spin()"></img>
<img id="wheel" src="Rwheelbg.png" onclick="spin()"></img>
</div>
<div class="col-lg-1">
<button id="reset" onclick="reset()">Reset</button>
</div>
<div class="col-lg-6">
<div class="well well-lg">
<span><center>Chips</center></span>
<br>
<span style="font-size: 180px; text-align: center;" id="chipsInv">10</span>
<!-- Why won't this center!? -->
<br>
<span style="float:right;" id="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></span>
</div>
</div>
<!-- Row ends here -->
</div>
<p>Bet on:</p>
<form action="">
<input type="checkbox" name="21" value="310" id="310"> 21
<br>
<input type="checkbox" name="9" value="100" id="100"> 9
<br>
<input type="checkbox" name="14" value="120" id="120"> 14
<br>
<input type="checkbox" name="13" value="240" id="240"> 13
</form>
<p>Bet on up to four numbers. However, be warned, the more numbers you bet on, the lower your chip return will be.</p>
<!-- container ends here -->
</div>
</body>
</html>
In Bootstrap, as best you can / where you can, use the Bootstrap classes to provide the styling you're looking for, as the Bootstrap classes are designed to be compatible with one another.
<div class="col-lg-6">
<div class="well well-lg">
<div class="text-center">Chips</div>
<div class="text-center" style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
If you want to text center everything in your example you can simply add the text-center class next to your well well-lg classes, as follows :
<div class="col-lg-6">
<div class="well well-lg text-center">
<div>Chips</div>
<div style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
Additionally;
with Bootstrap, they recommend you use div's where possible, and then
you can specify different behaviour by modifying the classes of those
divs, such as "d-inline", or "d-block". That was the reason I changed
your spans to divs.
Ensure your col-lg-6 div is contained within a div with class "row", and that according to the docs, these divs specifying col div when added together do not exceed 12. Bootstrap Grid Docs
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/
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