I'm trying to layout a section like the image here.
I'm using bootstrap 4. I've tried laying out with rows and cols but can never achieve this look. Right now I'm using a <ul> and <li>. Inside the <li> I have 3 inputs. I've tried putting all three inside a <div class="form-group form-inline"> and also tried separating them out to individual "form-group" divs with no luck. I'm sure I just don't understand enough about how to lay things out. I'm hoping someone can help me understand and maybe help me out here.
This is as close as I have come but I can't seem to get the widths correct and it seems to break onto the new line.
<div id="cardBody" class="card-body">
<div class="row">
<div class="container-fluid">
<div class="col-md-6">
<label class="control-label ml-2">Description</label>
</div>
<div class="col-md-4">
<label class="control-label">Link</label>
</div>
<div class="col-md-1">
<label class="control-label">Count</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<ul id="itemList" class="list-group">
<li class="list-group-item">
<div class="form-group form-inline mb-0">
<label for="description">⋮⋮</label>
<input type="text" class="form-control ml-2 mr-2" id="description" placeholder="">
<label class="sr-only" for="link">Link</label>
<input type="text" class="form-control mr-2" id="link" placeholder="">
<label class="sr-only" for="count">Count</label>
<input type="text" class="form-control mr-2" id="count" placeholder="">
</div>
</li>
<li class="list-group-item">
<div class="form-group form-inline mb-0">
<label for="description2">⋮⋮</label>
<input type="text" class="form-control ml-2 mr-2" id="description2" placeholder="">
<label class="sr-only" for="link2">Link</label>
<input type="text" class="form-control mr-2" id="link2" placeholder="">
<label class="sr-only" for="count2">Count</label>
<input type="text" class="form-control mr-2" id="count2" placeholder="">
</div>
</li>
<li class="list-group-item">⋮⋮</li>
<li class="list-group-item">4</li>
<li class="list-group-item">5</li>
<li class="list-group-item">6</li>
</ul>
</form>
</div>
</div>
</div>
Anyway, thanks in advance for any help or insight you can provide.
This worked for me. You may want to put the inline styles in your css file.
<div class="container">
<div id="cardBody" class="card-body">
<div class="row">
<div class="container-fluid d-flex">
<div class="col-md-7">
<label class="control-label ml-4">Description</label>
</div>
<div class="col-md-4">
<label class="control-label">Link</label>
</div>
<div class="col-md-1">
<label class="control-label">Count</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<ul id="itemList" class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">⋮⋮</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">2</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">3</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">4</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">5</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
</div>
Related
Like I said in the title. I want the row to have the same spacing like the container. I am using Bootstrap 5. So if you preview the HTML in Stackoverflow it won't show you the way I see it. I added a picture, so you can understand it better.
<div class="container position-absolute top-50 start-50 translate-middle">
<div class="container pt-5">
<div class="h-100 p-5 rounded" style="background-color: beige;">
<div class="display-4 text-center">Erstelle einen neuen Kunden</div>
</div>
<hr>
</div>
<div class="row">
<div class="col-xl-6">
<div class="row mb-3">
<div class="col-6">
<input type="text" name="txtName" class="form-control border-dark" placeholder="Vorname *" value="" #firstName />
</div>
<div class="col-6">
<input type="text" name="txtName" class="form-control border-dark" placeholder="Nachname *" value="" #familyName/>
</div>
</div>
<div class="mb-3">
<input type="text" name="txtEmail" class="form-control border-dark" placeholder="Email *" value="" #email/>
</div>
<div class="mb-3">
<input type="text" name="txtPhone" class="form-control border-dark" placeholder="Telefonnummer *" value="" #phoneNumber/>
</div>
</div>
<div class="col-xl-6">
<div>
<textarea name="txtMsg" class="form-control border-dark" placeholder="Beschreibung" style="width: 100%; height: 150px;" #description></textarea>
</div>
</div>
<div class="text-center mt-3">
<input type="submit" name="btnSubmit" class="btn border-dark" value="Speichern" style="background-color: beige;"/>
</div>
</div>
</div>
Simply wrap a div.container around your div.row to apply the .container styles to it.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container position-absolute top-50 start-50 translate-middle">
<div class="container pt-5">
<div class="h-100 p-5 rounded" style="background-color: beige;">
<div class="display-4 text-center">Erstelle einen neuen Kunden</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-xl-6">
<div class="row mb-3">
<div class="col-6">
<input type="text" name="txtName" class="form-control border-dark" placeholder="Vorname *"
value="" #firstName />
</div>
<div class="col-6">
<input type="text" name="txtName" class="form-control border-dark" placeholder="Nachname *"
value="" #familyName />
</div>
</div>
<div class="mb-3">
<input type="text" name="txtEmail" class="form-control border-dark" placeholder="Email *" value=""
#email />
</div>
<div class="mb-3">
<input type="text" name="txtPhone" class="form-control border-dark" placeholder="Telefonnummer *"
value="" #phoneNumber />
</div>
</div>
<div class="col-xl-6">
<div>
<textarea name="txtMsg" class="form-control border-dark" placeholder="Beschreibung"
style="width: 100%; height: 150px;" #description></textarea>
</div>
</div>
<div class="text-center mt-3">
<input type="submit" name="btnSubmit" class="btn border-dark" value="Speichern"
style="background-color: beige;" />
</div>
</div>
</div>
</div>
For my field validity, I would like to create a calendar field:
my code is the following:
<div class="col-12 col-12 col-md-4 col-lg-2">
<div class="form-group">
<label for="validity">Validaty</label>
<input id="validity" name="validity" type="text" class="form-control"
[(ngModel)]="order.validity"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Validity" autofocus>
</div>
</div>
I want to base myself on these two fields:
I have this code:
<div class="form-group row">
<label for="picker2" class="col-12 col-sm-4 col-form-label">{{'startDate | t }}</label>
<div class="col-12 col-sm-8">
<div class="input-group" style="background-color: white; max-width: 300px;">
<input id="picker2" class="form-control" placeholder="yyyy-mm-dd" name="dp2"
ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="search.enddate">
<div class="input-group-append" (click)="dp2.toggle()">
<div class="input-group-text">
<i class="icon-regular i-Calendar-4"></i>
</div>
</div>
</div>
</div>
</div>
I tried to adapt the code except that, the icon is incorrectly positioned on the field.
I don't understand where is the problem?
<div class="col-12 col-12 col-md-4 col-lg-2">
<div class="form-group">
<label for="validity">{{'3735' | t}}</label>
<input id="validity" name="validity" class="form-control" placeholder="yyyy-mm-dd" name="dp2"
ngbDatepicker #dp2="ngbDatepicker"
[(ngModel)]="order.validity "
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Validity" autofocus>
<div class="input-group-append" (click)="dp2.toggle()">
<div class="input-group-text">
<i class="icon-regular i-Calendar-4"></i>
</div>
</div>
</div>
Remove max-width: 300px;width: 100%; css from the input and move input and label inside <div class="input-group">
Check if this resolves your issue.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" media="screen">
</head>
<body>
<div class="col-12 col-md-4 col-lg-2">
<div class="form-group">
<label for="validity">Stop</label>
<input id="validity" name="validity" type="text" class="form-control" style="background-color: white;" placeholder="STOP" autofocus>
</div>
</div>
</div>
<div class="col-12 col-12 col-md-4 col-lg-2">
<div class="form-group">
<label for="validity">{{'3735' | t}}</label>
<div class="input-group">
<input id="validity" name="validity" class="form-control" placeholder="yyyy-mm-dd" name="dp2"
ngbDatepicker #dp2="ngbDatepicker"
[(ngModel)]="order.validity "
style="background-color: white;"
placeholder="Validity" autofocus>
<div class="input-group-append" (click)="dp2.toggle()">
<div class="input-group-text">
<i class="icon-regular i-Calendar-4"></i>
</div>
</div>
</div>
</div>
</body>
I have been trying since the morning to correctly align the start date and the end date but without success.
The start and end date do not line up like other blocks.
I do not understand anything...
If you solve my problem, I will be infinitely grateful to you. I really don't understand why the date blocks are not aligned.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<h1 id="welcome">HTML CSS JS</h1>
<div class="row">
<div class="col-12" *ngIf="currentView == 0">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-12 col-lg-4">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Libellé</label>
<div class="col-12 col-sm-9">
<input id="name" type="text" class="form-control" [(ngModel)]="search.name"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Libellé" autofocus>
</div>
</div>
<div class="form-group row">
<label for="ticker" class="col-12 col-sm-3 col-form-label">Bourse</label>
<div class="col-12 col-sm-9">
<input id="ticker" type="text" class="form-control" [(ngModel)]="search.ticker"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Bourse" autofocus>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group row">
<label for="isin" class="col-12 col-sm-3 col-form-label">ISIN</label>
<div class="col-12 col-sm-9">
<input id="isin" type="text" class="form-control" [(ngModel)]="search.isin"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="ISIN" autofocus>
</div>
</div>
<div class="form-group row">
<label for="filterForMarkets" class="col-12 col-sm-3 col-form-label">Marché</label>
<div class="col-12 col-sm-9">
<select id="filterForMarkets" class="form-control"
style="width:100%; max-width: 300px;"
(change)="filterForMarkets($event.target.value)">
<option value="">--Tous les marchés--</option>
<option *ngFor="let m of markets" value={{m.marketID}}>
{{m.name}}
</option>
</select>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group" >
<label for="date">Date de départ</label>
<div class="input-group">
<input name="beginDate" id="beginDate" type="text" class="form-control"
style="background-color: white; "
(ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
<input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
(ngModelChange)="changedBeginDate($event)"
style="position: absolute; left: 0; visibility: hidden">
<div class="input-group-append" (click)="dp1.toggle()">
<span class="input-group-text" id="basic-addon2">
<i class="icon-regular i-Calendar-4"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group" >
<label for="date">Date de fin</label>
<div class="input-group">
<input name="endDate" id="endDate" type="text" class="form-control"
style="background-color: white;"
(ngModelChange)="changedEndDateInput($event)" [(ngModel)]="endDate">
<input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp2"
ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="end.validityDate"
(ngModelChange)="changedEndDate($event)"
style="position: absolute; left: 0; visibility: hidden">
<div class="input-group-append" (click)="dp2.toggle()">
<span class="input-group-text" id="basic-addon2">
<i class="icon-regular i-Calendar-4"></i>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 ">
<div class="text-right">
<button type="button" class="btn btn-primary" (click)="launchSearch(modalConfirm)">
Rechercher
</button>
<button type="button" class=" ml-1 btn btn-primary" (click)="getTransactions(0)">
Affichez tous les mouvements
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Using flex property of CSS will solve your problem, it's very beneficial in aligning things as we want.
Try this:
.form-group {
display: flex;
}
And then you could obviously add margin and other properties for aligning all your items together.
I am designing an HTML template using bootstrap 4.3 and having issues with my column alignments. I am new to boostrap hence finding it difficult to align. If you notice some of the text in the columns wrap and the columns following the controls are not currently aligned since the width of the first column varies. I need to keep the width of the first column consistent so that the controls following that are aligned correctly from top to bottom. I have applied col-md-1 for the labels. Increasing it to col-md2 makes it even longer. Could some body help me with that
See the screenshot below
Html
<style>
.desc-header {
background-color: #FAE7D6;
color: black
}
.header {
width: 8%;
}
.panel-heading {
color: white;
background-color: #F59850;
border-color: #ddd;
}
.scrollClass {
height: 800px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Firm Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input
type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<form [formGroup]="frmFirm" (ngSubmit)="onSubmit()">
<div *ngIf="FirmDetails && FirmDetails.Firm" class="card-body scrollClass" style="width:100%">
<div class="form-group row">
<label for="inputName" class="col-md-1 col-form-label modal-label header">Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="firmName" />
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-1 col-form-label header">Short Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.SHORT_NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="shortName" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Alternate Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.ALTERNATE_NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="alternateName" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Date Founded</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{dateFoundedDate}}</div>
<kendo-datepicker *ngIf="EditMode" [format]="'MMMM yyyy'" formControlName="dateFounded">
</kendo-datepicker>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Intralinks Connections</label>
<div class="col-md-9">
<div class="form-group row">
<div class="col-md-3">
<label for="inputEmail">User Name</label>
</div>
<div class="col-md-3">
<label for="inputEmail">Password</label>
</div>
</div>
<div formArrayName="intraLinks"
*ngFor="let item of frmFirm.get('intraLinks').controls; let i = index; let last = last">
<div [formGroupName]="i">
<div class="form-group row">
<div class="col-md-3">
<input style="width:100%" formControlName="intraUsername"
placeholder="User Name">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="intraPassword"
placeholder="Password">
</div>
<div *ngIf="EditMode" class="col-md-3">
<button class="fa fa-trash" (click)="removeCredentials()"></button>
</div>
</div>
</div>
</div>
<div *ngIf="EditMode">
<button (click)="addCredentials()">Add Credentials</button>
</div>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Key Contact</label>
<div class="col-md-3">
<div *ngIf="!EditMode && FirmDetails.People">{{FirmDetails.KeyContact.Name}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [data]="FirmDetails.People"
formControlName="People" [defaultItem]="FirmDetails.KeyContact.Name" [valuePrimitive]="true"
[filterable]="false" textField="Name" valueField="ID"></kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Websites</label>
<div class="col-md-9">
<div class="form-group row">
<div class="col-md-3">
<label for="inputEmail">Website URL</label>
</div>
<div class="col-md-3">
<label for="inputEmail">User Name</label>
</div>
<div class="col-md-3">
<label for="inputEmail">Password</label>
</div>
</div>
<div formArrayName="websites"
*ngFor="let item of frmFirm.get('websites').controls; let i = index; let last = last">
<div [formGroupName]="i">
<div class="form-group row">
<div class="col-md-3">
<input style="width:100%" formControlName="websiteUrl"
placeholder="Website Url">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="username" placeholder="User Name">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="password" placeholder="Password">
</div>
<div *ngIf="EditMode" class="col-md-3">
<button (click)="removeWebsite()">Remove Website</button>
</div>
</div>
</div>
</div>
<div *ngIf="EditMode">
<button (click)="addWebsite()">Add Website</button>
</div>
</div>
</div>
<div class="form-group row">
<!-- <label for="inputEmail" class="col-md-1 col-form-label header">Addresses</label> -->
<div class="col-md-9">
<!-- <div *ngIf="!EditMode">{{FirmDetails.Firm.Addresses}}</div> -->
<!-- <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" /> -->
<div formArrayName="addressess"
*ngFor="let item of frmFirm.get('addressess').controls; let i = index;">
<div [formGroupName]="i">
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'streetId' + i}}">Street
1</label>
<div class="col-md-9">
<input class="form-control" id="{{'streetId' + i}}" type="text"
placeholder="Street address (required)" formControlName="street">
</div>
</div>
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'line2Id' + i}}">Line
2</label>
<div class="col-md-9">
<input class="form-control" id="{{'line2Id' + i}}" type="text"
placeholder="Street address (second line)" formControlName="line2">
</div>
</div>
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'line3Id' + i}}">Line
3</label>
<div class="col-md-9">
<input class="form-control" id="{{'line3Id' + i}}" type="text"
placeholder="Street address (third line)" formControlName="line3">
</div>
</div>
<div class="form-group row ">
<label class="col-md-1 col-form-label header" attr.for="{{'cityId' + i}}">City, Zip
Code</label>
<!-- <div *ngIf="!EditMode && FirmDetails.People">{{FirmDetails.Addresses}}</div> -->
<div class="col-md-3">
<kendo-dropdownlist style="width:100%" [data]="cities" [defaultItem]=""
[valuePrimitive]="true" formControlName="city" [defaultItem]=""
[filterable]="true" textField="Name" valueField="Id"></kendo-dropdownlist>
</div>
<div class="col-md-2">
<input class="form-control" id="{{'zipCodeId' + i}}" type="number"
placeholder="Zip Code" formControlName="zipCode">
</div>
</div>
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'phoneId' + i}}">Line
3</label>
<div class="col-md-9">
<input class="form-control" id="{{'phoneId' + i}}" type="text"
placeholder="Phone" formControlName="phone">
</div>
</div>
</div>
</div>
<div *ngIf="EditMode">
<button (click)="addAddress()">Add Address</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
<div class="desc-header">Firm History</div>
<div class="divEditor">
<ckeditor [editor]="Editor" [id]="'ckFirmHistory'" *ngIf="EditMode"
formControlName="firmHistory" style="font-size: 11px;" debounce="500"
[config]="EditorConfig">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FirmDetails.Firm.HISTORY_HTML">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span> <button class="btn btn-default btn mr-3">
<i class="fa fa-file-pdf-o"></i>
Download Template
</button>
</span>
<span> <button class="btn btn-default btn mr-3">
<i class="fa fa-th-large"></i>
Upload Template Data
</button>
</span>
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="saveManager()">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelManager">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteManager()">Delete</button>
</span>
</div>
</form>
</div>
</div>
Good day! In my log in form, I want my text fields to put it in to center using bootstrap. I already used class="form-inline justify-content-center" but it isn't working.
Code:
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #1b4d32;">
<form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center">
<br/><br/><br/><br/><br/><br/>
<p id="sign-lbl" style="text-align: center">Please enter your username and<br/>
password to login.</p><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="text" name="username" id="email" class="form-control" placeholder="Username" style="border-radius: 25px;">
</div>
</div><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;">
</div>
</div>
<br/><br/>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
</div>
So far this is my output:
https://prnt.sc/h675qg / https://jsfiddle.net/kf2c8trp/
Thank you very much
Simply add this code to your CSS:
form {
text-align:center;
}
or as #Connum said, use text-center of bootstrap classes. Read more here
After adding the bootstrap css file to your fiddle and the class text-center to the form, your inputs are being displayed centered: https://jsfiddle.net/kf2c8trp/4/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #1b4d32;">
<form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center text-center">
<br/><br/><br/><br/><br/><br/>
<p id="sign-lbl" style="text-align: center">Please enter your username and<br/>
password to login.</p><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="text" name="username" id="email" class="form-control" placeholder="Username" style="border-radius: 25px;">
</div>
</div><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;">
</div>
</div>
<br/><br/>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
Firstly, you are doing a lot of things wrong. Trying to create space with <br/> when you should be using margin or padding is not really cool :). Also, Inline styling is highly discouraged and Justify-content-centre work with flexboxes. That being said check-out the working example below, I have changed some of your bootstrap class and add few scss link below:
<div class=" col-xs-12 container" >
<form class="col-xs-12" role="form" method="post" action="<?=base_url()?>login/login_submit" >
<p id="sign-lbl">Please enter your username and<br/>
password to login.</p>
<div class="col-xs-6 col-xs-offset-3 form-group">
<div>
<input type="text" name="username" id="email" class="form-control" placeholder="Username">
</div>
</div><br/><br/>
<div class="col-xs-6 col-xs-offset-3 form-group">
<div>
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
</div>
</div>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-offset-3 col-xs-6 ">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
Check out the updated link