I have a list which needs to be centered in all screen sizes. I have the following code for it -
<div class="container container-fluid.body-content">
<div class="row">
<h2 style="text-align:center;">Select your Campus</h2>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 btn-group-vertical" style="background-color:#EAEBED;padding:2%;" id="dispcolleges" role="group" aria-label="...">
<button type="button" class="btn btn-default" onclick="storeValue('4847453903781888','National Institute of Technology Karnataka')">National Institute of Technology Karnataka</button>
<button type="button" class="btn btn-default" onclick="storeValue('5743114304094208','Test')">Test</button></div>
</div>
</div>
It is centered with offset in large and medium screens, but not on small screens. How do I fix this?
Full code can be found here
Try this:
<div class="container container-fluid.body-content">
<div class="row">
<h2 style="text-align:center;">Select your Campus</h2>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-sm-offset-3 col-sm-6 col-xs-10 col-md-6 col-md-offset-6 btn-group-vertical col-xs-offset-1" style="background-color:#EAEBED;padding:2%;" id="dispcolleges" role="group" aria-label="..."><button type="button" class="btn btn-default" onclick="storeValue('4847453903781888','National Institute of Technology Karnataka')">National Institute of Technology Karnataka</button><button type="button" class="btn btn-default" onclick="storeValue('5743114304094208','Test')">Test</button></div>
</div>
</div>
The reason is display: inline-block; of class btn-group-vertical
Solution: Add display: inherit; for your <div>. Try this:
<div class="container container-fluid.body-content">
<div class="row">
<h2 style="text-align:center;">Select your Campus</h2>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 btn-group-vertical" style="background-color:#EAEBED;padding:2%;display: inherit;" id="dispcolleges" role="group" aria-label="..."><button type="button" class="btn btn-default" onclick="storeValue('4847453903781888','National Institute of Technology Karnataka')">National Institute of Technology Karnataka</button><button type="button" class="btn btn-default" onclick="storeValue('5743114304094208','Test')">Test</button></div>
</div>
</div>
Related
Have a grid with 4 columns and 4 rows. What I want to happen is on a small display the 4th column becomes a 5th row on a small display vs the column that it is on a medium+ display. It's a pet project to try and understand the bootstrap grid layout better. I'm essentially making a responsive calculator for the practice. I feel like I could do this with just raw CSS but figured bootstrap had to have some utilities that would make this easier. Images for example.
Large format:
Small format:
I have a start for the markup. There is some more associated CSS but I don't think it's important in the example. I've had a few versions but this is where I'm at in the moment.
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">1</button>
<button type="button" class="btn-lg btn-outline-dark">2</button>
<button type="button" class="btn-lg btn-outline-dark">3</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">4</button>
<button type="button" class="btn-lg btn-outline-dark">5</button>
<button type="button" class="btn-lg btn-outline-dark">6</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">7</button>
<button type="button" class="btn-lg btn-outline-dark">8</button>
<button type="button" class="btn-lg btn-outline-dark">9</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-light">±</button>
<button type="button" class="btn-lg btn-outline-dark">0</button>
<button type="button" class="btn-lg btn-outline-light">.</button>
</div>
</div>
<div class="col-md-4">
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">X</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">-</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">+</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">=</button>
</div>
</div>
</div>
</div>
EDIT:
I can only pick one solution as an answer but kiranvj, WebDevBooster, and dferenc all provided Bootstrap 4 release version working solutions. I can only mark one as an answer. No slight to the rest of you guys. My hands are tied.
I would do something like this. Check in full screen mode and resize to small
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
<div class="col-12 col-sm-8">
<div class="row">
<div class="col-4">black</div>
<div class="col-4">black</div>
<div class="col-4">black</div>
</div>
<div class="row">
<div class="col-4">black</div>
<div class="col-4">black</div>
<div class="col-4">black</div>
</div>
<div class="row">
<div class="col-4">black</div>
<div class="col-4">black</div>
<div class="col-4">black</div>
</div>
</div>
<div class="col-12 col-sm-4 text-danger">
<div class="row">
<div class="col-4 col-sm-12">pink</div>
<div class="col-4 col-sm-12">pink</div>
<div class="col-4 col-sm-12">pink</div>
</div>
</div>
</div>
I think, the simplest possible markup is the one below. It also uses the Order classes, but instead of setting the order of every button explicitly, this one touches just the "extra" buttons in the last column with .order-last .order-sm-0.
<div class="container">
<div class="row justify-content-center">
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">1</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">2</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">3</button>
<button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">X</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">4</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">5</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">6</button>
<button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">-</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">7</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">8</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">9</button>
<button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">+</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">±</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">0</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">.</button>
<!--
Use `col-12 col-sm-3` in case you want a full-width `=` button
In that case you could omit `.justify-content-center` at the wrapper
-->
<button type="button" class="col-12 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">=</button>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
What I would do is create 3 additional pink div elements that render below the black divs, and then hide them using the hidden-*-up and hidden-*-down classes. When the screen is small, hide the pink divs on the right and show the pink divs on the bottom, and vice versa when the screen is small.
Since you wanted to build a calculator, I took a slightly different approach than my esteemed colleagues and created a grid that looks, feels and quacks like an actual calculator. I hope you aren't too mad about that. :-)
The main job is done by using the re-ordering classes. Those allow moving things around based on your breakpoint needs.
For example, the class combo order-3 order-md-1 says:
"Normally i.e. from the smallest screen size onwards you're gonna go to position #3 but from the medium (md) screen size and up you're gonna go to position #1."
And since the neighboring HTML elements also have order-1 as their default position, that element is gonna appear in the same order on medium sized screens as the neighbors. But on smaller than md screens that element is gonna become a "third-class citizen" and will, therefore, be positioned after the element with the order-2 class.
The <div class="w-100"></div> elements are just handy dividers. w-100 means "width:100%".
Speaking of dividers: I've noticed that your calculator has no division button, but I hope you'll figure out what to do about that.
Finally, you hadn't specified what to do with the equal sign button. So, I took the liberty to change its appearance on smaller screens. That is accomplished by first hiding the default button using the d-none d-md-block classes and then having a wider version of it appear using the d-md-none class. That last class basically says: Hide it (display:none) from md screens and up.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<style>
body {
font-family: 'Roboto Mono', monospace;
}
</style>
<div class="container">
<div class="row mt-2">
<div class="col-md-8">
<div class="row">
<button type="button" class="btn-lg btn-outline-dark order-1">1</button>
<button type="button" class="btn-lg btn-outline-dark order-1">2</button>
<button type="button" class="btn-lg btn-outline-dark order-1">3</button>
<button type="button" class="btn-lg btn-outline-dark order-3 order-md-1">×</button>
<div class="w-100 order-1"></div>
<button type="button" class="btn-lg btn-outline-dark order-1">4</button>
<button type="button" class="btn-lg btn-outline-dark order-1">5</button>
<button type="button" class="btn-lg btn-outline-dark order-1">6</button>
<button type="button" class="btn-lg btn-outline-dark order-3 order-md-1">−</button>
<div class="w-100 order-1"></div>
<button type="button" class="btn-lg btn-outline-dark order-1">7</button>
<button type="button" class="btn-lg btn-outline-dark order-1">8</button>
<button type="button" class="btn-lg btn-outline-dark order-1">9</button>
<button type="button" class="btn-lg btn-outline-dark order-3 order-md-1">+</button>
<div class="w-100 order-1"></div>
<button type="button" class="btn-lg btn-outline-light text-dark order-1">±</button>
<button type="button" class="btn-lg btn-outline-dark order-1">0</button>
<button type="button" class="btn-lg btn-outline-light text-dark order-1">.</button>
<button type="button" class="btn-lg btn-outline-dark order-1 d-none d-md-block">=</button>
<div class="w-100 order-2"></div>
<div class="w-100 order-4"></div>
</div>
<div class="row">
<div class="col-3 col-sm-4 pl-0 pr-0 pr-sm-4">
<button type="button" class="btn-lg btn-block btn-outline-dark order-4 d-md-none">=</button>
</div>
</div>
</div>
</div>
</div>
i cant find the correct config to this config in bootstrap 3 ...
i have this input field but i cant put the image in that position
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input size="16" class="form-control" type="text" name="nombre" required placeholder="Tu nombre completo">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input size="16" class="form-control" type="email" name="correo" required placeholder="Tu email">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar"><span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
</div>
Try this:
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar">
<span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
<div class="row">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar">
<span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
</div>
<div class="col-sm-6">
Image here
</div>
</div>
</div>
</div>
You should have another look at the grid docu. Nesting is an solid option furthermore you do not need to use col-sm-6 combined with col-md-6 only use the smaller one if the values are the same.
You are making it a little too complicated, see my codepen. When working with Bootstrap think big to small. It helps you develop a layout and then work your way down to smaller things.
Hope this helps! :)
http://codepen.io/sequential/pen/egxbbK
<div class="row">
<div class="col-sm-6 tier1">
<div class="smBox"></div>
<div class="smBox"></div>
</div>
<div class="col-sm-6 tier1">
<div class="lgBox"></div>
</div>
</div>
The button that's next to a column containing a select element appears to have some extra margins on it. On my actual site it seems to be extra positive margin, while on CodePen it appears to be negative.
I suspect they are the same problem though with the markup though. Here's the CodePen demo: http://codepen.io/anon/pen/gabZMo?editors=100
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4">New Event</button>
</div>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
I've looked through the Bootstrap docs and this should be the correct markup. I've also tried wrapping the button in its own column, but that didn't change anything.
You have 3 options to resolve the problem,
Put the <button class="btn btn-primary btn-block">Free Quote</button> inside <div class="form-group"></div>
Reason the button is pushing left of right because col-sm-4 selector has left and right padding 15px which is getting overwritten by btn-default selector padding: 6px 12px;
So add custom selector custom-margin and define custom CSS
1 HTML
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4 custom-margin">New Event</button>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
Fiddle 1
2 HTML
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4 custom-margin">New Event</button>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
Fiddle 2
Or Do it right way
3 HTML
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<select class="form-control">...</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<button class="btn btn-default btn-block">New Event</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
</div>
</div>
</div>
Fiddle 3
You don't want to use col-sm-4 directly on the button. Put btn-block on the button and stick it in a col-sm-4 div, like so:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-xs-8">
<select class="form-control">
<option value="1">Test Event</option>
<option value="7">Test Event 2: The Re-testening</option>
</select>
</div>
<div class="col-xs-4">
<button class="btn btn-default btn-block">New Event</button>
</div>
</div>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
I'm trying to fix the vertical position of a bootstrap column without success.
<div class="col-sm-9 col-xs-12 fixed">
<div class="row pad-20">
<div class="col-xs-6">
<button type="button" value="0" class="btn {{color1}} btn-lg btn-block choice">{{choice1}}</button>
</div>
<div class="col-xs-6">
<button type="button" value="1" class="btn {{color2}} btn-lg btn-block choice">{{choice2}}</button>
</div>
</div>
</div>
</div>
Where fixed is:
.fixed{
position: fixed;
bottom: 5px;
}
The proportion sm-9 and xs-12 are not respected ...
Any help?
Do you have a <div class="container"> around the markup you show? Also, in the markup you show there's an extra closing </div> tag.
Seems to be working in this JSFiddle I put together:
https://jsfiddle.net/o540r7cf/
HTML:
<div class="container">
<div class="row">
<div class="col-sm-9 col-xs-12 fixed">
<div class="row">
<div class="col-md-6 col-xs-6">
<button type="button" value="0" class="btn btn-primary btn-lg btn-block"> Choice 1</button>
</div>
<div class="col-md-6 col-xs-6">
<button type="button" value="1" class="btn btn-primary btn-lg btn-block">Choice 2</button>
</div>
</div>
</div>
</div>
</div>
CSS:
.fixed {
position: fixed;
bottom: 5px;
}
i'm creating a simple menu at the top of my web page using bootstrap 3, with btn and btn-info classes in four divs (col-md-3). the space between the buttons is too high. how can i reduce the space between them ? for example 5 pixels margin. it's my code :
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
پشتیبانی
</button>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
آموزش نصب آی او اس ۹
</button>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
آموزش به دست آوردن یودید
</button>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
خانه
</button>
</div>
</div>
</div>
you can see the web site at : ios9.siblearn.ir
A tip for the future, bootply.com is better for mocking up Bootstrap issues since it has the Bootstrap framework included by default. Here is how I would set it up:
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-info">
پشتیبانی
</button>
<button class="btn btn-info">
آموزش نصب آی او اس ۹
</button>
<button class="btn btn-info">
آموزش به دست آوردن یودید
</button>
<button class="btn btn-info">
خانه
</button>
</div>
</div>
</div>
Bootply Example