In this bootply the welcome as well as the form is coming on the left hand side.But I want to bring it at the centre.Can any body please tell me how to do?
<form id="form1">
<div class="container-fluid">
<div class="row-fluid">
<div class="span1"></div>
<div class="span10" style="margin-bottom: 6px; margin-top: 0px; background: #efeee9">
<img src="ui_resources/img/ title.jpg" alt="" align="left">
<h2 align="center" style="margin-top: 18px;"></h2>
</div>
<div class="span1"></div>
</div>
<div class="row-fluid">
<div class="span1"></div>
<div class="span10" style="background: #eee; border: 1px solid #ddd;">
<div class="span7 center login-header">
<h2 style="color:#E86537 " align="center">Welcome </h2>
</div><!--/span-->
<div class="row-fluid">
<div class="well span7 center login-box">
<div class="alert alert-info">
Please login with your Username and Password.
</div>
<fieldset>
<div class="input-prepend" title="Username" data-rel="tooltip" style="margin-left:80px;">
<span class="add-on"><i class="icon-user"></i></span><input autofocus="" class="input-large span10" name="j_username" id="username" type="text" value="">
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="Password" data-rel="tooltip" style="margin-left:80px;">
<span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="j_password" id="password" type="password" value="">
</div>
<div class="clearfix"></div>
<div class="input-prepend" style="margin-left:80px;">
<label class="remember" for="remember"><input type="checkbox" id="remember" style="display:">Remember me</label>
</div>
<div class="clearfix"></div>
<p class="center span6" style="margin-left:80px;">
<button type="submit" class="btn btn-primary">Login</button>
New Userregister
</p>
</fieldset>
</div><!--/span-->
</div><!--/row-->
</div><!--/row-->
</div>
<div class="span1"></div>
</div></form>
<div class="row-fluid">
<div class="span1"></div>
<div class="span10" style="margin-top: 6px;">
<div class="span1"></div>
</div>
</div>
try to set your welcome div in another div like this
<div class="row-fluid">
<div class="offset3 span6 center login-header">
<h2 style="color:#E86537 " align="center">Welcome </h2>
</div>
</div>
use offset
Move columns to the right using .offset* classes. Each class increases
the left margin of a column by a whole column. For example, .offset4
moves .span4 over four columns.
DEMO
Try using this in your CSS
.row-fluid .login-header,
.row-fluid .login-box{
float:none;
margin:0 auto !important;
}
Since .span* has float: left style by default, you can override it by using float:none;
.login-box {
margin:0 auto;
float:none;
}
margin:0 auto; is used to center your loginbox horizontally.
Related
Im trying to center the header and input field with bootstrap. I cant get the input field to center with the header. If anyone has a better way of doing this let me know.
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="display-4 text-center">Weight Converter</h1>
<form>
<div class="form-group">
<input
id="lbsInput"
type="number"
class="form-control form-control-lg"
placeholder="Enter Weight..."
/>
</div>
</form>
<div id="output">
<div class="card">
<div class="card-block">
<h4>Grams:</h4>
<div id="gramsOutput"></div>
</div>
</div>
</div>
</div>
</div>
</div>
you have incomplete HTML and no CSS. But based on what you have, a simple margin: auto; in CSS should center the element for you.
If you want more control you should look into flexbox. post more code and you'll get more help.
EDIT: thanks for the code: this works to center the input. I just verified it. let me know if you need any more help. cheers
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="display-4 text-center">Weight Converter</h1>
<form>
<div class="form-group" id="centerParent">
<input
id="lbsInput"
type="number"
class="form-control form-control-lg"
placeholder="Enter Weight..."
/>
</div>
</form>
<div id="output">
<div class="card">
<div class="card-block">
<h4>Grams:</h4>
<div id="gramsOutput"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#centerParent {
display: flex;
flex-direction: row;
justify-content: center;
}
</style>
I am trying to align the controls in my angular 8 application. Basically I need to align the Amount column like shown in the screenshot below. Could somebody tell me how to achieve that. Currently using col-sm-5 for Amount column. If I do col-sm-6 it would push the edit button further out which i don't want.I need to get the textbox upto the red line shown in screenshot 1
screenshot 1
Screenshot 2
<form [formGroup]="settlementForm" (ngSubmit)="addAccount()" class="form-horizontal argentex-form" novalidate>
<div class="modal-body">
<div *ngIf="messageViewerModel.messages.length > 0" class="viewer">
<app-message-viewer [messageViewer]="messageViewerModel"></app-message-viewer>
</div>
<!-- Remaining balanace input -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Remaining Balance</label>
<div class="col-sm-6">
<currency class="form-control" [stringModel]="remainingBalance()" [isDisabled]="true"></currency>
</div>
</div>
<!-- Dropdown Accounts -->
<div class="form-group">
<label class="col-sm-4 control-label">Account</label>
<div class="col-sm-6">
<div class="selectdiv">
<select class="form-control" id="selectedAccount" #selectedAccountID
name="selectedAccountFormControl" formControlName="selectedAccountFormControl">
<option *ngFor="let account of accounts; let ind=index;" value="{{ ind }}"
ngDefaultControl>
{{ account.accountName }}
</option>
</select>
</div>
</div>
</div>
<!-- Amount in the traded currency -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Amount ({{settlement.tradedCurrency}})</label>
<div class="col-sm-5">
<currency class="form-control" [isDisabled]=editMode [(numModel)]="settlement.amount" [stringModel]="settlement.amount"
[required]="true" [readonly]="settlement.isPayTotal"></currency>
</div>
<div class="col-sm-1" style="padding-top: 5px">
<!-- settlement?.isPayTotal -->
<div *ngIf="editMode">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt=""/>
</a>
</div>
<div *ngIf="!editMode">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt=""/>
</a>
</div>
</div>
</div>
<!-- Value Date -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Value Date</label>
<div class="col-md-6">
<input type="text"
name="valueDate"
formControlName="valueDate"
class="form-control"
[(ngModel)]="settlement.valueDate"
bootstrapDatepicker />
</div>
</div>
<!-- Reference -->
<div class="form-group">
<label class="col-sm-4 control-label">Reference</label>
<div class="col-sm-6">
<input type="text" formControlName="reference" name="reference" class="form-control"
[(ngModel)]="settlement.reference" />
</div>
</div>
</div>
<div class="modal-footer">
<hr>
<button type="submit" class="btn" [disabled]="settlementForm.disabled || !settlementForm.valid || selectedAccountID.value <= 0 || !settlement.amount" >Save</button>
<button type="button" class="btn btn-close" (click)="closeModal()">Cancel</button>
</div>
</form>
Proposed solution
Its near but not still what I want
screenshot
Used the folowing css
.custom-css-input {
width: 100%;
/* float: left; */
}
.icon-button {
width: 40px;
float: left;
}
p.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
Following html
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Amount ({{settlement.tradedCurrency}})</label>
<div class="col-sm-5" >
<currency class="form-control custom-css-input" [(numModel)]="settlement.amount" [(stringModel)]="settlement.amount"
[isDisabled]=!editMode [required]="true" ></currency>
</div>
<div style="padding-top: 5px">
<div *ngIf="!editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt="" />
</a>
</div>
<div *ngIf="editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt="" />
</a>
</div>
</div>
<p class="clear"></p>
</div>
sry for not posting bootstrap solution, but if you are in hurry, simple css can work for you. I have added three custom css classes (custom-css-input,icon-button,clear), .clear is only there if floats disturb the rest of your form, but that's just in case. You can play width calc width and fixed width in order to achive your desired look. (Wrap whole input+button component in one single column and play inside with widths)
.custom-css-input {
width: calc(100% - 50px);
float: left;
}
.icon-button {
width: 40px;
float: right;
}
p.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
<div class="col-sm-6">
<currency class="form-control custom-css-input" [isDisabled]=editMode [(numModel)]="settlement.amount" [stringModel]="settlement.amount" [required]="true" [readonly]="settlement.isPayTotal"></currency>
<div *ngIf="editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt="" />
</a>
</div>
<div *ngIf="!editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt="" />
</a>
</div>
<p class="clear" />
</div>
I am trying to display content in two columns in HTML5. But, somehow, I am doing something wrong. Here's my HTML code
.column1 {
float: left;
width: 70%;
}
<div class="cd-admin-upper-container container-fluid">
<div class="row">
<div class="column1">
<h1>Device UnAssignment</h1>
<div>
<div class="alert alert-info" style="height : 50%; margin-bottom : 2vw;width: 40%">
<label class="cd-admin-create-modal-label">Patient Name: </label>
<label class="cd-admin-create-modal-label">Device Serial Number: </label>
</div>
<div>
<button type="submit" class="btn btn-primary" style="margin-left: 3%"
ng-click="unassignDevice(device.patientId);"><span title="UnAssign Device"></span> UnAssign
</button>
</div>
</div>
<div class="column2">
<h1>Device Assignment</h1>
<p>Hello this is column two</p>
</div>
</div>
</div>
</div>
Here's the JSFiddle link - http://jsfiddle.net/chandham/k39vpafd/
I somehow nested column1 and column2 in same div. Here's the updated code.
<div class="cd-admin-upper-container container-fluid">
<div class="row">
<div class="column1">
<h1>Device UnAssignment</h1>
<div class="alert alert-info" style="height : 50%; margin-bottom : 2vw;width: 40%">
<label class="cd-admin-create-modal-label">Patient Name: </label>
<label class="cd-admin-create-modal-label">Device Serial Number: </label>
</div>
<div>
<button type="submit" class="btn btn-primary" style="margin-left: 3%" ng-click="unassignDevice(device.patientId);"><span title="UnAssign Device"></span> UnAssign
</button>
</div>
</div>
<div class="column2">
<h1>Device Assignment</h1>
<p>Hello this is column two</p>
</div>
</div>
</div>
I have three div
Navbar
Banner
Content
What I want to do is make background of navbar full width, but all elements inside navbar have margin and center, also banner and content. So I add nav-topmost class to the div that contains navbar. But when I add this class. Three div is overlapped. Without this class, everything work fine but my navbar not full width.
Can anyone help me solve this issue? Thanks in advance !
Here is my code :
.nav-topmost
{
margin-bottom:20px;
padding:0;
height:50px;
background:#000;
}
.banner
{
height:100px;
background:#eee;
margin-bottom:15px;
}
.content
{
background:#bbb;
}
<link href="http://netdna.bootstrapcdn.com/bootswatch/3.0.0/united/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid nav-topmost">
<div class="container">
<div class="clearfix">
<div class="pull-right">
SET HOME
</div>
<div class="pull-right">
<input type="submit" value="Search" class="form-control"/>
</div>
<div class="pull-right">
<input type="text" class="form-control" />
</div>
</div>
<div class="banner">
BANNER
</div>
</div>
</div>
<div class="container">
<div class="content">
Some contents
</div>
</div>
I made some correction here and hope this is what you want.
I changed the structure and put .nav-topmost's div out of .container's div.
http://jsfiddle.net/amitv1093/z2eoxm4v/
---html---
<nav class="nav-topmost">
<div class="container">
<div class="pull-right">
SET HOME
</div>
<div class="pull-right">
<input type="submit" value="Search" class="form-control"/>
</div>
<div class="pull-right">
<input type="text" class="form-control" />
</div>
</div>
</nav>
<div class="container">
<div class="banner">
BANNER
</div>
</div>
</div>
<div class="container">
<div class="content">
Some contents
</div>
</div>
---css---
.nav-topmost
{
margin-bottom:20px;
padding:10px 0px;
background:#000;
}
Is this what you want:
.nav-topmost
{
position:relative;
top:0;
}
.container, .clearfix, .banner{
width:100%;
}
Here is the JSFiddle demo
remove nav-topmost class from container-fluid element and add it to the main navigation bar like this
<div class="container-fluid"> /* Remove nav-topmost */
<div class="container">
<div class="clearfix nav-topmost"> /* Add Here */
<div class="pull-right">
SET HOME
</div>
<div class="pull-right">
<input type="submit" value="Search" class="form-control"/>
</div>
<div class="pull-right">
<input type="text" class="form-control" />
</div>
</div>
<div class="banner">
BANNER
</div>
</div>
</div>
After various attempts with pull-right, float style and row-fluid, I decided to ask here:
What I try to do is simply to have a Map appear to the right of a set of rows.
Here is how it looks right now:
Which is not too far from what I want, but the name row plus any following rows should appear below each other.
Here is how my HTML looks:
<div class="panel-body">
<div class="row-fluid">
<div class="col-lg-10 pull-right">
<google-map id="my-map" bounds="map.bounds" events="map.events"
center="map.center" zoom="map.zoom" draggable="true"
control="map.control"> <marker ng-if="positionMarker"
coords="positionMarker" icon="positionMarker.icon"> </marker> </google-map>
</div>
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</div>
</div>
I bet this is a typical scenario but I have failed to find an example.
Other attempts that makes name appear below number, moves it below the map.
Is it perhaps possible to avoid having the map take up vertical space in the Bootstrap grid system?
You should use a 2-col layout :
Left column for your inputs
Right column for your Google Map
Plus, remember to put your .input-group inside a .form-group to get paddings/margins set to Bootstrap default values.
Here's a working example (click on Full page for a better view):
body {
padding-top: 25px;
}
.map {
width: 100%;
height: 150px;
background: tomato;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel heading</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</form>
</div>
<div class="col-xs-6">
<div class="map"></div>
</div>
</div>
</div>
</div>
</div>