This question already has answers here:
Center the content inside a column in Bootstrap
(7 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 3 years ago.
Hi I have this screen:
And it needs to be viewable on phones, tablets and desktops. Uses BootStrap 4
What I want is a maximum width for each button AND for the buttons to be centered on the screen.
Here is my html/css:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="max-width=device-max-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<style> a { max-width: 400px; } </style>
</head>
<body>
{{template "navbar"}}
<div class="container">
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/camera" role="button">Camera</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/disk-memory" role="button">Disk & Memory</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/network" role="button">Network</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/wifi-networks" role="button">WiFi Networks</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/speaker" role="button">Speaker Test</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/location" role="button">Location</a>
</div>
</div>
</div>
<script src="/static/js/jquery-3.3.1.slim.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#btnBack").hide();
});
</script>
Any help would be much appreciated, thanks.
Just add this styles:
<style>
.row div{
display: flex;
justify-content: center;
}
.btn-block{
max-width: 400px;
}
</style>
Result:
<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="max-width=device-max-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.row div{
display: flex;
justify-content: center;
}
.btn-block{
max-width: 400px;
}
</style>
</head>
<body>
{{template "navbar"}}
<div class="container">
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/camera" role="button">Camera</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/disk-memory" role="button">Disk & Memory</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/network" role="button">Network</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/wifi-networks" role="button">WiFi Networks</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/speaker" role="button">Speaker Test</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 w-100" >
<a class="btn btn-primary btn-block mt-3" href="/location" role="button">Location</a>
</div>
</div>
</div>
<script src="/static/js/jquery-3.3.1.slim.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
.container {
position : absolute;
left : 50%;
top :50%;
transform : translate(-50%,-50%);
}
Related
I am designing a responsive form. My form has 1 label, 1 input field, and 5 buttons.
Both my buttons and the input field are under col-8.
I want my buttons to be placed in such a way that:
It should start placement below and at the beginning of the input field.
(imagine 2 rows under a col-8)
Space between 2 buttons are equal.
On small screen, buttons will be shown as stack.
Here are screenshots about what I want:
For normal screens
When small screens - it should be stacked
Here is my 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>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-dark col-6" style="margin-top: 2rem;">
<form>
<div class="form-group row">
<label for="id" class="col-4 col-form-label" style="color: white;">id</label>
<div class="col-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="offset-4 form-group row justify-content-between">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
<div class="offset-4 form-group row">
<div class="col-sm">
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-warning">B</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">C</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">D</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-info">E</button>
</div>
</div>
<div class="offset-4 form-group row justify-content-between">
<div class="col-sm">
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-warning">B</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">C</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">D</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</form>
</div>
</body>
</html>
I have tried 3 times to place the 5 buttons.
first - only row and justify-content-between
then - row and col
finally - row, col and justify-content-between
But each of them either crosses the input field width (1st screenshot) or keeps gap from input field width (2nd screenshot).
How can I properly make the 5 buttons that satisfy both justify-content-between and stack [ col inside row ] properly?
A request: I would like to have a suggestion - that doesn't excessively involved using margin and padding, since this should be good in all screen size.
Your markup has a few problems. To avoid these in the future, read each dot (bullet point) under How it works section of the Bootstrap grid section.
Here's a breakdown of what was wrong:
not all .rows were direct children of .container or .col. Because .row has negative margins, it needs a parent having horizontal "gutter" paddings to compensate the negative margins (or you could disable the gutter by applying mx-0 or no-gutters classes).
you applied .offset-4 on .row, which is designed for .cols. This is important, because by applying it to the .row you misalign all columns in that row.
to make use of .justify-content-between you don't necessarily need another level of .row + .cols. All you need is display: flex on the element, which can be applied with d-flex class.
As an alternative solution, I've changed last .row example to use a .btn-group, which is a slightly better UI solution for this type of action-bar layout. The custom CSS is mainly for switching it to vertical on mobile (which could also be achieve by applying .btn-group-vertical to it, but it doesn't sport responsive variants).
See it working:
.custom-btn-group {
width: 100%;
}
#media(max-width: 767px) {
.custom-btn-group,
.vertical-mobile {
flex-direction: column;
}
.custom-btn-group:not(#_) .btn {
margin-left: 0;
}
.custom-btn-group:not(#_) .btn:first-child {
border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
}
.custom-btn-group:not(#_) .btn:last-child {
border-bottom-left-radius: .25rem;
border-top-right-radius: 0;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<form class="bg-dark col-sm-6 py-3">
<div class="form-group row">
<label for="id" class="col-sm-3 col-md-4 col-form-label text-white">id</label>
<div class="col-sm-9 col-md-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="d-flex justify-content-between vertical-mobile">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="btn-group custom-btn-group">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-dark col-6" style="margin-top: 2rem;">
<form>
<div class="form-group row">
<label for="id" class="col-4 col-form-label" style="color: white;">id</label>
<div class="col-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="offset-4 col-8">
<div class="row justify-content-between" style="margin: 0%; padding: 0%;">
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-primary">A</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-success">B</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-warning">C</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-danger">D</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-primary">E</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I want to mention some things that worked for me:
I had to make the margin: 0% and padding: 0% each time for col-auto, if I do not, then there is a gap created like in my screenshot.
I had to put each button in col-auto then each col-auto in row. Finally, I made the row justify-content-between, and of course, margin: 0% and padding: 0% for removing unnecessary gaps.
Finally I wrapped the whole thing under offset-4 col-8 which was wrapped under row.
I am very new to CSS responsive layouts and need help structuring my navbar. I am aware that there are many other similar SO Q&As, but none of them give me the desired output.
I tried using the suggestion from this SO question, but instead of the buttons resizing, a scrollable scrollbar appears upon window resize which is not what I want.
Here's what my HTML code looks like at the moment:
.nowrap{white-space: nowrap;}
.column2 {
float: left;
width: 33%;
text-align: center;
overflow:auto;
}
.column3 {
float: center;
width: 33%;
text-align: right;
}
.column4 {
float: right;
width: 33%;
text-align: right;
overflow:auto;
}
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://bootswatch.com/4/united/bootstrap.min.css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="row">
<div class="container">
<div class="column2"><h4 >Welcome back <span>Example</span></h4></div>
<div class="column3">
<h1 style="font-size:2.5vw;" title='About'>Example<span class="text-primary">TEXT</span>Example</h1>
</div>
<div class="column4" >
<div class="col-md-6 col-md-offset-3 responsive nowrap">
<button type="button" class="btn btn-danger btn-responsive">Search</button>
<button type="button" class="btn btn-primary btn-responsive" id="logoutButton " >Logout</button>
<button type="button" class="btn btn-primary btn-responsive" data-toggle="modal" data-target="#loginModal" >Login</button>
</div>
</div>
</div>
</nav>
Summary of button requirements:
The three buttons in the same row
Buttons responsively get smaller without the need to scroll.
The content in the three <div> tags don't overlap
Please do take into consideration that I am very new to CSS styling and so would appreciate all the constructive feedback!
You can use bootstrap 3 classes. Is that close to what you try to achieve?
(Edit snippet per comments:)
.nowrap{white-space: nowrap;}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-4 text-left"><h4 >Welcome back <span>Example</span></h4></div>
<div class="col-xs-2 col-sm-4 text-center">
<h1 style="font-size:2.5vw;" onclick="about()" title='About'>Example<span class="text-primary">TEXT</span>Example</h1>
</div>
<div class="col-xs-7 col-sm-4 text-right">
<div>
<button type="button" class="btn btn-danger btn-responsive" onclick="search()" >Search</button>
<button type="button" class="btn btn-primary btn-responsive" id="logoutButton " >Logout</button>
<button type="button" class="btn btn-primary btn-responsive" data-toggle="modal" data-target="#loginModal" >Login</button>
</div>
</div>
</div>
</div>
</nav>
How do I position the icon to the far right and keep the text on the left with Bootstrap.
Here's my effort so far: https://www.bootply.com/5E2CGFEWdx
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<button class="btn btn-lg btn-success col-xs-12"> Call Us <span class="glyphicon glyphicon-earphone push-right"></span></button>
</div>
</div>
You can use float: right to make your image stick to the right, and set the text-align: left so the text will start at the left end.
Example here
align-left {
text-align: left;
}
.push-right {
float: right;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<button class="btn btn-lg btn-success col-xs-12 align-left"> Call Us <span class="glyphicon glyphicon-earphone push-right"></span></button>
</div>
</div>
You can reposition the span holding the icon and make it float: right;:
.container {
margin-top: 25px;
}
.call-us {
text-align: left !important;
}
.call-us span {
float: right;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<button class="btn btn-lg btn-success col-xs-12 call-us"><span class="glyphicon glyphicon-earphone"></span>Call Us</button>
</div>
</div>
Try following
<style>
button {text-align:left}
</style>
<div class="container">
<div class="row">
<button class="btn btn-lg btn-success col-xs-12"> Call Us <span class="glyphicon glyphicon-earphone pull-right"></span></button>
</div>
</div>
use pull-left, pull-right utility classes
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<button class="btn btn-lg btn-success col-xs-12">
<span class="pull-left">Call Us</span>
<i class="glyphicon glyphicon-earphone pull-right"></i>
</button>
</div>
</div>
</body>
</html>
In bootstrap 4 just need to use default float-right and text-left css classes like following:
<button type="button" class="btn text-left">
<span class="float-right"><i class="fas fa-question"></i></span> ClickMe
</button>
I am using BootStrap grid to design my html pages. Everything is working fine except for small screens. In small screens the views are overlapping like below
I am using the below code
div class="container" >
<div class="row">
<div class=" col-xs-6 col-sm-offset-1
col-sm-4 col-md-offset-2 col-md-3">
<div id="poster">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg">
</div>
</div>
<div class="col-sm-offset-1 col-sm-4 col-xs-6 col-md-2" >
<div id="ratingdiv">
<label>Your Rating</label>
<div id="rateYo"></div>
<div class="editbtn">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>
</div>
<div class="deletebtn">
<button>Delete</button>
</div>
</div>
</div>
</div>
</div>
I gave "col-xs-6" but still its not working.
Could some one tell me what I am doing wrong.
Really appreciate any ideas or suggestions.
Thanks in advance
You missed some closing tags. Here you go. Let me know if this is what you've expected.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-6 col-lg-4">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">
<div id="ratingdiv">
<div class="row">
<label>Your Rating</label>
<div id="rateYo"></div>
</div>
<div class="row">
<button type="button" class="btn btn-info btn-md">Edit</button>
<button type="button" class="btn btn-danger btn-md">Delete</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you don't have provide any css , that's why i got two opinions. first one i think you images overlapping the col-xs-6 and the solution is below . may be this will fix your issue
#poster {
width:100%;
float:left;
}
#poster img {
width:100%;
}
otherwise i think you have set position:absolute to #ratingdiv , if you set postion to #ratingdiv just change position:relative to the media queries
As you can see, all of my rows from buttons to my text input are off to the right occupying the first 8 of 12 columns (given that for each row I specified only 8 rows). I Want to be able to occupy column 3-10 for each row. Thank you :)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href='css/calculator.css' type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<h1 class="text-center">Calculator</h1>
<div id="calculator">
<div class="row row-centered">
<h6 class="text-center">Sandstein Incorporated</h6>
</div class="row row-centered">
<div class="row row-centered">
<input type="text" class="col-md-12" id="input" value='0'/>
</div>
<div id="innerCalc">
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">AC</button>
<button class="col-md-2 btn btn-primary">CE</button>
<button class="col-md-2 btn btn-primary">%</button>
<button class="col-md-2 btn btn-primary">/</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">7</button>
<button class="col-md-2 btn btn-primary">8</button>
<button class="col-md-2 btn btn-primary">9</button>
<button class="col-md-2 btn btn-primary">*</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">4</button>
<button class="col-md-2 btn btn-primary">5</button>
<button class="col-md-2 btn btn-primary">6</button>
<button class="col-md-2 btn btn-primary">-</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">1</button>
<button class="col-md-2 btn btn-primary">2</button>
<button class="col-md-2 btn btn-primary">3</button>
<button class="col-md-2 btn btn-primary">+</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">.</button>
<button class="col-md-2 btn btn-primary">0</button>
<button class="col-md-2 btn btn-primary">Ans</button>
<button class="col-md-2 btn btn-primary">=</button>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
body{
background-color:#4099FF;
}
#calculator{
border-radius: 5%;
background-color: rgba(250, 250, 250, .7);
width: 40%;
margin:auto;
padding-left: 1%;
padding-right: 1%;
height:230px;
}
#input{
margin:auto;
text-align:right;
width: 70%;
}
button{
font-size: 2.0em;
margin:1px;
}
#innerCalc{
text-align: center;
}
We can use bootstrap Offsetting columns to align.
Refer > http://getbootstrap.com/css/#grid-offsetting
Remove the below css:
#input{
margin:auto;
text-align:right;
width: 70%;
}
And modify the input classes like below:
<input type="text" class="col-md-8 col-md-offset-2" id="input" value='0'/>
Add col-md-offset-2 class in fist child of each row:
<button class="col-md-2 col-md-offset-2 btn btn-primary">AC</button>
<button class="col-md-2 col-md-offset-2 btn btn-primary">7</button>
....
Try the below code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href='css/calculator.css' type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body{
background-color:#4099FF;
}
#calculator{
border-radius: 5%;
background-color: rgba(250, 250, 250, .7);
width: 40%;
margin:auto;
padding-left: 1%;
padding-right: 1%;
height:230px;
}
button{
font-size: 2.0em;
margin:1px;
}
#innerCalc{
text-align: center;
}
</style>
</head>
<body>
<h1 class="text-center">Calculator</h1>
<div id="calculator">
<div class="row">
<h6 class="text-center">Sandstein Incorporated</h6>
</div class="row">
<div class="row">
<input type="text" class="col-md-8 col-md-offset-2" id="input" value='0'/>
</div>
<div id="innerCalc">
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">AC</button>
<button class="col-md-2 btn btn-primary">CE</button>
<button class="col-md-2 btn btn-primary">%</button>
<button class="col-md-2 btn btn-primary">/</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">7</button>
<button class="col-md-2 btn btn-primary">8</button>
<button class="col-md-2 btn btn-primary">9</button>
<button class="col-md-2 btn btn-primary">*</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">4</button>
<button class="col-md-2 btn btn-primary">5</button>
<button class="col-md-2 btn btn-primary">6</button>
<button class="col-md-2 btn btn-primary">-</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">1</button>
<button class="col-md-2 btn btn-primary">2</button>
<button class="col-md-2 btn btn-primary">3</button>
<button class="col-md-2 btn btn-primary">+</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">.</button>
<button class="col-md-2 btn btn-primary">0</button>
<button class="col-md-2 btn btn-primary">Ans</button>
<button class="col-md-2 btn btn-primary">=</button>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
use this css...
<style>
.row
{
width:80%;
margin:0px auto;
}
</style>
If you want the 3-10 columns for the grid structure you used, #Santosh's answer would work just fine.
Just a tip:
But the approach you have used to structure the grid can be much better. In other words for your structure(calculator buttons to come on the 3-10 columns), you could have divided the contents inside id="calculator" into 3 columns rather than rows. The second(middle) column could have contained the buttons and input box.