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;
}
Related
i want to prevent the elements inside my main div from stacking on top of each other when window is resized.
regular view
window resized
<body>
<div class="calbody">
<div class="top-body">
<h1 class="body_name">CALCULATOR</h1>
<div><input class="screen" type="text" /></div>
</div>
<div class="mainbody">
<div class="container">
<div class="row">
<div class="col-sm">
<button type="button" class="b1 btn btn-danger">+</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">-</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger" \>x</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">/</button>
</div>
</div>
</body>
yes, i am using bootstrap-5. It worked after changing col-sm to col.Thank You.
I would like to align all button to bottom on the page:
The editor with code:
https://codesandbox.io/s/angular-7-bootstrap-4-3pv0p?from-embed
<div class="container-fluid py-2">
<div class="row">
<div class="col-md-12 mx-auto">
<div class="card rounded-0">
<div class="card-header">
<h2>Boot Container View</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="ws-details" style="background:gray; height:100px">
Element1
</div>
<div
class="order-details"
style="background:lightgray; height:200px"
>
Element 2
</div>
</div>
<div class="col-md-6">
<div style="background:gray; height:305px">Element3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block">
Button 1a
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block">
Button 2a
</button>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block">
Button 1b
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block">
Button 2b
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block">
Button 3b
</button>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block">
Button 1c
</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried with position absolute and relative with parent/child element. But still I have problem with the proper align buttons. Also - I would like to change size (width of buttons), and after change style width there is problem with center button.
Changes in app.component.html file:
On line 25 in your html file change <div class="row"> to <div class="row position-relative">.
On line 27 and line 65 change <div class="center-block"> to <div class="center-block align-to-bottom">
Changes in app.component.css file:
Add:
#media only screen and (min-width: 767px) {
.align-to-bottom {
bottom: 0;
position: absolute;
}
}
Link to the editor: https://codesandbox.io/s/angular-7-bootstrap-4-u5uet
To change the width of the button you could add button.btn-info {width: 150px;} to your css. You said then there was a problem with the center button but what problem do you mean?
use this css properties:
bottom:0
position:absolute
It seems that you are using a bootstrap for this code and thus if you need to align the buttons to the bottom, you can use a custom css. Let this css class be alignBottom.
.alignBottom{
position: absolute;
bottom: 0px;
}
I have what I call a tricky problem. I want to align two buttons with the panel-title and have them justified right. However, when I put them in I get this:
https://jsfiddle.net/mwoods98/fo58qswn/3/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Order Summary Details</strong></h3><span class="pull-right" style="position: relative;top: -110%;"><button class="btn btn-primary pull-right" type="button"><span class="pull-right" style="position: relative;top: -110%;">Print Summary</span> <button class="btn btn-primary" type="button">Print Label</button></button></span>
</div>
</div>
</div>
</div>
</body>
</html>
The result I want is the buttons aligned on the same line as the title.
Thanks!
You can set the position of buttons absolute :
<span class="pull-right" style="position: absolute;top: 2px;right: 21px;">
<button type="button" class="btn btn-primary pull-right">Print Summary</button>
<button type="button" class="btn btn-primary">Print Label</button>
</span>
https://jsfiddle.net/xewLs6t2/
Another solution can be something like that:
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="height: 40px;">
<h3 class="panel-title"><strong>Order Summary Details</strong></h3>
<div style="margin-top: -25px;" class="pull-right">
<button type="button" class="btn btn-primary">Print Summary</button>
Print Label
</div>
</div>
</div>
</div>
</div>
This code:
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" class="form-control" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>
Results in this:
I had to add the following CSS to get the buttons to sit on the bottom and not float in the middle, and I wonder if this has something to do with it:
.row {
position: relative;
}
.button {
position: absolute;
bottom:0;
right:0;
}
I suggest that you use Flexbox with media queries instead of absolute positioning. DEMO
#media(min-width: 768px) {
.row.flex {
display: flex;
align-items: flex-end;
}
}
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" class="form-control" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<div class="clear"></div>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
and the new code for class clear is:
.clear {clear: both;}
Now the button will always placed at bottom not float in middle.
If i m correct you want the save button next to textarea.
Having a class="form-control"on textarea will make it take the whole width.
Removing the class the code is as below :
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>
Now the Save Button will be placed exactly next textarea . You can use margin and padding to position it properly the way u like.
EDIT for aligned buttons:
<div class="row">
<div class="col-sm-2">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
</div>
</div>
<div class="col-sm-2">
<button class="btn btn-default" style="margin-left:-30px;">Save</button>
</div>
<div class="col-sm-8 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</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>