I'm using bootstrap and I'm trying to align the stuff inside my row. I realize that I haven't used up all the column space, and that's fine. I just want the stuff centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
#headings {
text-align: center;
}
#row-container {
text-align: center;
}
#take-from-break, #take-from-session {
float: right;
}
</style>
<html>
<div class="container-fluid">
<div class="container">
<div id="headings">
<h1>Pomodoro Clock</h1>
<h3>A Pomodoro Clock helps you break down work into intervals, separated by short breaks.</h3>
</div>
<div id="setup">
<div id="row-container">
Enter time in minutes
<div class="row">
<div class="col-md-1"><button id="take-from-break">-</button></div>
<div class="col-md-2"><input type="number" placeholder="Break Length"></div>
<div class="col-md-1"><button id="add-to-break">+</button></div>
<div class="col-md-2"></div> <!-- blank space -->
<div class="col-md-1"><button id="take-from-session">-</button></div>
<div class="col-md-2"><input type="number" placeholder="Session Length"></div>
<div class="col-md-1"><button id="add-to-session">+</button></div>
</div>
</div>
</div>
<div id="clock-holder">
<button id="clock"></button>
</div>
</div>
</div>
</html>
Here is the JSFiddle: https://jsfiddle.net/c8wLxkob/
And here is the image of the page that I get:
Since it doesn't look like you're using Bootstrap to size your columns in particular, one way to center-align your boxes is to use display: flex along with justify-content: center. I've retained the Bootstrap sizing in the spacer, so the result is still responsive.
Screenshot of result:
Here is a demo to show what I mean:
#headings {
text-align: center;
}
#row-container {
text-align: center;
}
.wrap {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="container">
<div id="headings">
<h1>Pomodoro Clock</h1>
<h3>A Pomodoro Clock helps you break down work into intervals, separated by short breaks.</h3>
</div>
<div id="setup">
<div id="row-container">
Enter time in minutes
<div class="wrap">
<div class="center-wrap">
<button id="take-from-break">-</button>
<input type="number" placeholder="Break Length">
<button id="add-to-break">+</button>
</div>
<div class="col-md-2"></div>
<div class="center-wrap">
<button id="take-from-session">-</button>
<input type="number" placeholder="Session Length">
<button id="add-to-session">+</button>
</div>
</div>
</div>
</div>
<div id="clock-holder">
<button id="clock"></button>
</div>
</div>
</div>
JSFiddle Version: https://jsfiddle.net/re8jzxer/
Related
Why does the "Subscribe now!" button go outside the container in the picture below and how can I make it so that the right edge lines up with the rest of the page? (column 12 in the bootstrap grid)
I have tried box-sizing: border-box but it had no effect.
My HTML code:
.container-fluid {
padding: 0;
}
.carousel-inner .carousel-item h1 {
font-weight: bold;
font-size: 300%;
/*-webkit-text-stroke:1px black;*/
font-family: 'Open Sans', sans-serif;
/*text-align:right;*/
}
.carousel-inner .carousel-item img {
filter: brightness(50%);
}
#paddingrow {
padding: 25px;
}
#paddingrowLarge {
padding: 100px;
}
#accordionRightalign {
float: right;
}
#mycard {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
</div>
</form>
</div>
</div>
</div>
</div>
Bootstrap rows have margin-right: -15px; margin-left: -15px; that's why the right edge doesn't lined up. Try to add mx-0 = margin-left:0 and margin-right: 0, a bootstrap class. In your nested row form.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form>
<div class="row mx-0">
<div class="col pl-0 pr-3">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
</div>
</form>
</div>
</div>
</div>
</div>
Make sure col in the container with margin and padding to zero.
Put your image into container with the width not greather than 100%.
I noticed my button wasn't in the column div, so I made two column div's, one size 10 and one size 2, put input in the first, put the button in the second, and it seems to work now.
Here is the fixed code:
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form class="form">
<div class="row">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<div class="col-sm-2">
<button class="btn btn-primary w-100" type="submit">Subscribe now!</button>
</div>
</div>
</form>
</div>
</div>
</div>
I am trying to align the text "address" in left div vertically. But i am unable to.
Here is the code,
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
<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-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row">
<!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
What am i doing wrong. I am using bootsrap 3.
Plunker: https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview (View Plunker in full screen)
I am trying to have result similar to this. The coloured borders are only for representation .
You are setting the styles to the center div, instead it should be the label inside the center div
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
you can add this code in your CSS file to get vertical-align.
but first, you have to add a new class with row class
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row vertical">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
Here's a solution setting top margin/padding on columns not nested then cancelling top margin/padding in nested ones:
Plunkr
Relevant CSS:
[class*="col-"] {
border: 1px solid black;
padding: 10px;
}
.row:first-child [class*="col-"] {
margin-top: 10px;
background-color: lightgreen;
}
.row .row:first-child [class*="col-"] {
margin-top: -10px;
background-color: pink;
}
.row .row:not(:first-child) [class*="col-"] {
margin-top: 0;
background-color: lightblue;
}
Solution by #codegeek which avoids these problems is better imho :)
Code Pen
You can remove the offset and match it up to 12-grid system.
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
background: yellow;
top: 60px;
border: 1px solid blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-3 centre">
<label>Address</label>
</div>
<div class="col-xs-8 col-sm-offset-1" style="border:1px solid green">
<!--You can remove style and remove offset and change it to sm-9 -->
<div class="row">
<!--nested row one-->
<div class="col-xs-6">
<label>Street</label>
</div>
<div class="col-xs-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-xs-6">
<label>Landmark</label>
</div>
<div class="col-xs-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-xs-6">
<label>Zip code</label>
</div>
<div class="col-xs-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
As for now, margin-top is a worth option trying.
I positioned the left div by using top: 50%(takes the height of the parent) and then using translateY, which takes the height of the current element.
Since relative positioning didnt take % values, I have used absolute.
But giving absolute makes the div come out of the document flow, hence used "left" for the right sibling with the width of the left sibling.
.parent{
position: relative;
}
.centre{
background: yellow;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.right{
left: 25%;
/* width of left sibling, since col-md-3 is 25%*/
background: lightgreen;
}
Plnkr Link(with bootstrap) or JsFiddle (without Bootstrap)
Result:
Your vertical-align:middle doesn't work, because elements with display: block cannot be centered that way. An easy alternative would be to use display: flex.
Here is a snippet to demonstrate the way display:flex can be used to center pretty much everything:
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
.flex {
display: flex;
align-items: center;
}
<div class="container-fluid">
<div class="row">
<div class="flex">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
</div><!--row end-->
</div>
EDIT: maybe this guide might be of interest for you:
Centering in CSS: A Complete Guide
I am working on a display where there are 3 checkboxes. When one of these checkboxes is triggered, a message or input field should appear. I got that part working, but the checkbox and the message are not aligned as shown in the image below
As you can see the "Ondertiteling" checkbox is not aligned with the text "Ondertitel enabled".
This is my code (with the toggling of the message ommitted for the question's sake)
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span>Aanvraag #1</span>
<i class="fa fa-remove pull-right icon-clickable"></i>
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label> <input type="checkbox">Ondertitels</label>
</div>
<div class="checkbox">
<label> <input type="checkbox">Vertaling</label>
</div>
<div class="checkbox">
<label><input type="checkbox">Voice-overs</label>
</div>
</div>
<div class="col-lg-9">
<div>Ondertitel enabled</div>
<div>Vertaling enabled</div>
<div class="text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
</div>
</div>
</div>
</div>
</div>
</div>
How can I align the text to be on the same height as the checkbox? Thanks in advance.
I would ask to change your markup to fix the formatting so that bootstrap will handle it for us. Change the markup into rows such as this:
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Vertaling</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox">Vertaling enabled</div>
</div>
</div>
See demo below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span>Aanvraag #1</span>
<i class="fa fa-remove pull-right icon-clickable"></i>
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Ondertitels</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox">Ondertitel enabled</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Vertaling</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox">Vertaling enabled</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Voice-overs</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
</div>
</div>
</div>
</div>
</div>
</div>
Well the solution of your problem is to create three separate rows and one row spanning total 12 columns, for which you will use 3 for one checkbox and other for your notification or message.
So each message and check box will be bundled together in container or row class.
Will provide code shortly, if you don't understand what I am trying to say
remove the 10px margin-top from your checkbox class or add it to the othediv. I think this is what cause your offset. :)
Ok so you just need to add margin-top: 10px and margin-bottom: 10px to your div inside the col-lg-9
The answer you are probably searching is just changing the line or font height in your lg9 div
or using only one column, with checkbox and label having a constant width
If I enclose with a <div> with class="row" and give each button class="span4" the buttons fill the total width of the screen.
I want each button to be only as wide as the text which it contains, with the centers being at 25%, 50% and 75% of the width.
[aaa] [bbb] [ccc]
not
[ aaa ][ bbbb ][ cccc ]
I am new to bootstrap and not a CSS guru.
How do I achieve this?
My buttons also have class="btn-outline btn-default", but that shouldn't affect things (I think) .
By the way, I am currently considering exactly 3 buttons, but if a generic solution for any number is just as easy, that would be welcome.
first of all from your classes it seems you are still using bootstrap-v2, try using bootstrap-v3 (v4 it is still in alpha beta[now] stage), and you can achieve what you want with this:
.row {
border: 1px dashed red /* demo */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<div class="col-xs-4">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
UPDATE (bootstrap-v4)
For those who are using/want to use bootstrap V4, here is how:
.row {
border: 1px dashed red /* demo */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<div class="col-4">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
Try to use a div with class="row" and 3 div with the class="span4 text-center" and put a button in each of these
The bootstrap way would be
.col-md-3 {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>
or to do it using plain CSS and flexbox
.row {
display: flex;
}
.col-md-4 {
flex-grow: 1;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>
I'm having trouble trying to vertically center a button in a the body of a panel. I have tried a bunch of css suggestions on stack overflow and the button will still not move. I want the button to be centered next to the image.
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<p>Panel Heading</p>
</div>
<div class="panel panel-body">
<div class="col-lg-2 button">
<button id="fix_button" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-triangle-top"> Fix</span> </button>
</div>
<div class="col-lg-offset-3"> <img src="users/1479318868.jpg" class="img-responsive" width="300px"> </div>
</div>
</div>
</div>
</div>
</div>
try
.panel-body { display: flex; align-items: center; }
You can try CSS Flexbox. Make your .panel-body a flex container use flex's center properties.
Have a look at the snippet below:
.panel-body {
display: flex;
justify-content: center; /* Horizontally centers the content */
align-items: center; /* Vertically centers the content */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<p>Panel Heading</p>
</div>
<div class="panel panel-body">
<div class="col-lg-2 button">
<button id="fix_button" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-triangle-top"> Fix</span>
</button>
</div>
<div class="">
<img src="http://placehold.it/300x300" class="img-responsive" width="300px">
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps!
Try it:-
button{
height:20px;
width:100px;
margin: -20px -50px;
position:relative;
top:50%;
left:50%;
}
for just horizontal alignment use either
button{
margin: 0 auto;
}
or
div{
text-align:center;
}