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>
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;
}
When I add a form to the window is arranged like this:
but I need:
In file: popup.component.html:
<div id="ng2-opd-popup-main"
*ngIf="visible" [ngClass]="mainClass" [ngStyle]="mainStyle">
<div class="row">
<div style="display: inline-block;width:100%">
<div id="ng2-opd-popup-well" [ngStyle]="wellStyle"
class="ng2-opd-popup-well ng2-opd-popup-well-sm">
{{popupService.options.header}}
</div>
</div>
<div style="margin:20px;">
<ng-content></ng-content>
<div *ngIf="popupService.options.showButtons"
style="margin-bottom:20px;margin-top:20px;float: right">
<button id="cancelBtn" [ngClass]="cancelBtnStyle"
type="reset" (click)="confirmNo()">
{{popupService.options.cancleBtnContent}}
</button>
<button id="confirmBtn" [ngClass]="confirmBtnStyle"
(click)="confirmYes()">
{{popupService.options.confirmBtnContent}}
</button>
</div>
</div>
</div>
</div>
When I change line <div style="margin:20px;">on <div style="margin:20px; width:100%"> Nothing happens
The application does not respond to my code changes. What is the problem?
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;
}