I am making a simple login with bootstrap and I am having a problem dealing with this, here is my code:
<div class="container">
<div class="row justify-content-center no-gutters" style="padding-top:150px;">
<div class="col-lg-8">
<div class="card shadow-lg o-hidden border-0 my-5 mx-auto">
<div class="card-body">
<div class="row">
<div class="col-lg-6 p-0">
<div class="p-5">
<div class="text-center">
<h4 class="text-dark mb-4">Login</h4>
</div>
<form class="user">
<div class="mb-3">
<input class="form-control form-control-user" type="email" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Username" name="email">
</div>
<div class="mb-3">
<input class="form-control form-control-user" type="password" id="exampleInputPassword" placeholder="Password" name="password">
</div>
<button class="btn btn-primary d-block btn-user w-100" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is the result:
Can somebody help? Thank you so much!
You have used 'col-lg-6'. On large screen it contains only half width of the row. If you remove this class There won't be any extra space. You can read more about grid system
Related
Let's say I have this kind of grid columns bootstrap 4 (image on the left) and then I collapse the card 1 using boostrap collapse, and I expected the grid 3 to overlapping the height of row (and the result will be on the right image)
I have tried it using align-item-start and align-self-start, turns out it just like the row class bootstrap..
my investigation is that grid 1 and 2 covered by row class that has certain height (if height 1 < 2 then height 2 will be the row height and vice versa..
is this even possible using bootstrap 4?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row no-gutter">
<div class="col-7">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Data Rekam Medis</h6>
<button class="btn btn-xs btn-primary mb-0" type="button" data-toggle="collapse" data-target="#collapseRekamMedis" aria-expanded="true" aria-controls="collapseRekamMedis">
Toggle
</button>
</div>
<div class="collapse show" id="collapseRekamMedis">
<!-- Card Body -->
<div class="card-body py-2">
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Pasien<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-8">
<input type="text" class="form-control number text-right" name="anamnesa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Berat Badan<i class="text text-danger">*</i></label>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control number text-right" name="anamnesa" />
<div class="input-group-append">
<span class="input-group-text">kg</span>
</div>
</div>
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Tekanan Darah<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control number text-center" name="sistole" />
<div class="input-group-append input-group-prepend">
<span class="input-group-text">/</span>
</div>
<input type="text" class="form-control number text-center" name="diastole" />
</div>
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Perabaan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="perabaan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Pengamatan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="pengamatan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Penciuman<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="penciuman" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Diagnosa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="diagnosa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Sindrom<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="sindrom" />
</div>
</div>
<div class="row">
<label class="col-sm-3 col-form-label text-right">Anamnesa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<textarea class="form-control" name="sindrom" rows="4"></textarea>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="button" class="btn btn-warning" id="btn_save"><i class="fa fa-save"></i> Simpan</button>
</div>
</div>
</div>
</div>
<div class="col-5 float-right">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Informasi Pasien</h6>
<button class="btn btn-xs btn-primary mb-0" type="button" data-toggle="collapse" data-target="#collapsePatientData" aria-expanded="true" aria-controls="collapsePatientData">
Toggle
</button>
</div>
<div class="collapse show" id="collapsePatientData">
<!-- Card Body -->
<div class="card-body py-2">
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">
<nobr>Pasien <i class="text text-danger">*</i></nobr>
</label>
<div class="col-8">
<input type="text" readonly class="form-control-plaintext" id="patient_name" value="Maman Abdurrahman">
</div>
</div>
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">Usia</label>
<div class="col-8">
<input type="text" readonly class="form-control-plaintext" id="patient_name" value="25 thn">
</div>
</div>
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">Diagnosa</label>
<div class="col-8">
<input type="text" readonly class="form-control-plaintext" id="patient_name" value="Radang tenggorokan">
</div>
</div>
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">Anamnesa</label>
<div class="col-12">
<textarea class="form-control-plaintext" id="patient_name" rows="6">publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Data Rekam Medis</h6>
<button class="btn btn-xs btn-primary mb-0" type="button" data-toggle="collapse" data-target="#collapsesRekamMedis" aria-expanded="true" aria-controls="collapsesRekamMedis">
Toggle
</button>
</div>
<div class="collapse show" id="collapsesRekamMedis">
<!-- Card Body -->
<div class="card-body py-2">
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Pasien<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-8">
<input type="text" class="form-control number text-right" name="anamnesa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Berat Badan<i class="text text-danger">*</i></label>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control number text-right" name="anamnesa" />
<div class="input-group-append">
<span class="input-group-text">kg</span>
</div>
</div>
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Tekanan Darah<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control number text-center" name="sistole" />
<div class="input-group-append input-group-prepend">
<span class="input-group-text">/</span>
</div>
<input type="text" class="form-control number text-center" name="diastole" />
</div>
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Perabaan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="perabaan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Pengamatan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="pengamatan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Penciuman<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="penciuman" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Diagnosa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="diagnosa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Sindrom<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="sindrom" />
</div>
</div>
<div class="row">
<label class="col-sm-3 col-form-label text-right">Anamnesa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<textarea class="form-control" name="sindrom" rows="4"></textarea>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="button" class="btn btn-warning" id="btn_save"><i class="fa fa-save"></i> Simpan</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
Silly me, turns out you don't need to user .row class..
simply using .float-left and .float-right on each div
FINAL CODE
<div class="col-7 float-left"></div>
<div class="col-4 float-right"></div>
<div class="col-7 float-left"></div>
I've created a Bootstrap 4 form with this layout
And the Razor page code to generate it is:
#page
#model HighStreetLeads3.Pages.Leads.EditModel
#{
ViewData["Title"] = "Edit";
Layout = "~/Pages/Shared/_Layout.cshtml";
}
<h1>Edit</h1>
<h4>Lead</h4>
<hr />
<form class="form-inline col-lg-12" method="post">
<div>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Lead.Id" />
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.Name" class="control-label float-left">Name</label>
</div>
<div class="col-9">
<input asp-for="Lead.Name" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.Name" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.PhoneNumber" class="control-label float-left">Number</label>
</div>
<div class="col-9">
<input asp-for="Lead.PhoneNumber" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.PhoneNumber" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.Status" class="control-label float-left"></label>
</div>
<div class="col-9">
<input asp-for="Lead.Status" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.Status" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.NextAction" class="control-label float-left">Next Action</label>
</div>
<div class="col-9">
<input asp-for="Lead.NextAction" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.NextAction" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.WebAddress" class="control-label float-left">URL</label>
</div>
<div class="col-9">
<input asp-for="Lead.WebAddress" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.WebAddress" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.ContactName" class="control-label float-left">Contact</label>
</div>
<div class="col-9">
<input asp-for="Lead.ContactName" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.ContactName" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group text-left">
<div class="col-3">
<label asp-for="Lead.Where" class="control-label float-left">Address</label>
</div>
<div class="col-9">
<input asp-for="Lead.Where" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.Where" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-12">
<div class="form-group">
<div class="col-1 mr-0 pr-0">
<label asp-for="Lead.Notes" class="control-label col-3 float-left"></label>
</div>
<div class="col-8">
<input asp-for="Lead.Notes" class="form-control mb-2 ml-5" style="width:100%" />
<span asp-validation-for="Lead.Notes" class="text-danger"></span>
</div>
<div class="col-2 ml-5 float-right">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
</div>
#*<div class="form-group col-1 offset-11">
<input type="submit" value="Save" class="btn btn-primary" />
</div>*#
I can add the page model in if anyone needs it, but I don't think it's relevant, and the css is the standard bootstrap.
So..... as you can see, the majority of the form is in two columns, but the last field (Notes) takes up more of the screen width. Because of this, I can't get the label or the entry field for Notes to line up with the previous fields. I've tried fiddling about with margins and padding, but I can't get an exact line up. It feels like I need to be able to ask Bootstrap for a width of a fractional column.
Is there a way of getting this last field laid out so it aligns with the previous ones?
Any input gratefully received.
Nick
You use col-3 in <div class="col-6">,so you need to set col-1.5 in <div class="col-12">,but there is no col-1.5,so you can only try to set the css and make it close to col-1.5:
<div class="row col-12">
<div class="col-12">
<div class="form-group">
<div class="col-md-1" style="flex: 0 0 12.15%;max-width: 12.15%;">
<label asp-for="Lead.Notes" class="control-label float-left"></label>
</div>
<div class="col-8">
<input asp-for="Lead.Notes" class="form-control mb-2 ml-5" style="width:100%" />
<span asp-validation-for="Lead.Notes" class="text-danger"></span>
</div>
<div class="col-2 ml-5 float-right">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
</div>
result:
I created a login in page using a bootstrap grid with an image col-lg-8 and the form col-lg-4. The problem is that when I minimize the screen for smaller devices, the contents are supposed to respond and span 12 each as usual. However, the image always overflows to the top and is cut off. Yes, I used img-fluid on the image.
<section class="Form mx-4 h-100">
<div class="container h-100 d-flex">
<div class="row no-gutters h-80 align-self-center row-eq-height" id="slide-container">
<div class="col-lg-8 my-auto responsive py-5">
<img src="Athlete 1.png" alt="This is America" class="img-fluid border-right">
</div>
<div class="col-lg-4 px-4 my-auto sign-in sign-in-up">
<div class="row no-gutters">
<div class="col-12 d-flex justify-content-center align-items-center">
<div class="col-2 px-0">
<img src="Athlete 3.png" alt="Logo" class="img-fluid rounded-circle">
</div>
<div class="col-7 align-self-center mb-0 px-0">
<h2>Side-Gym</h2>
</div>
</div>
<div class="col-12 text-center text-secondary mt-2">
<h4>Members Login</h4>
</div>
</div>
<form>
<div class="form-group">
<label for="email">Email</label>
<input type="email" placeholder="Enter Your Email..." name="email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" placeholder="Password" name="password" id="password" class="form-control">
</div>
<button type="submit" class="btn btn-outline-primary btn-block mt-4 mb-1">Login</button>
<button type="button" class="btn btn-link btn-block" disabled>--------or--------</button>
<button id="register" type="button" class=" btn-regis btn btn-primary btn-block mt-1 mb-3">Register</button>
Forgot Password?
<div class="mb-4 textlink text-center formaer-dropdown">
<p class="d-inline">Don't have an account? </p>
Register Here!
</div>
</form>
</div>
</section>
If you really need height: 100vh; for the body add overflow-y: scroll; with it at #media(min-width: 992px) AND REMOVE all the h-100 & h-80 classes, otherwise the overflow-y: scroll; won't work
My concern is my middle col-md-4, there is an annoying margin in the bottom. I tried disabling some CSS in the inspect element but it still stays. How can I center my search bar?
Here is my bootstrap:
<div class="container mb-3 mt-3">
<div class="row align-self-center">
<div class="col-md-4">
<img src="img/logo_header.png" class="img-fluid" width="200">
</div>
<div class="col-md-4">
<form action="cards/search.php" method="POST">
<div class="input-group">
<input type="text" name="text-search" id="searchBox" class="form-control search-bar" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="Search Coupons" required>
<div class="input-group-prepend">
<button type="submit" name="submit-search" class="input-group-text bg-blue"> <i class="fas fa-search"></i> </button>
</div>
</div>
<div id="response" class="scrollbar-design search-content"></div>
</form>
</div>
<div class="col-md-4">
<img src="img/logo_header.png" class="img-fluid" width="200">
</div>
</div>
</div>
UPDATE:
padding 0px does not seem to work
just add my-auto since it's bootstrap
<div class="col-md-4 mx-auto text-center my-auto">
</div>
I am trying to position a well to the center of the page. There are similiar questions on SO, but the code is somewhat different to mine. My HTML is given below:
<div class="container">
<div class="row">
<div class="well col-sm-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
I tried putting the well div inside another div with col-md-12 and other values, but the well did not get centered. Does anyone know how I could center the well in the page?
You could try offsetting columns
Give your columns the class col-sm-offset-4
Like so: <div class="well col-sm-offset-4 col-sm-4">
Example: http://jsfiddle.net/u48v34p7/
<div class="container">
<div class="row">
<div class="col-sm-4 well col-sm-offset-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
Just replace your code here:
<div class="well col-sm-4" align="center">
With this (you can also isolate the style in a CSS class):
<div class="well col-sm-4" style="margin:auto; float:none;">
You could put two dummy divs to make your well centered. I have noticed that you only have one col-sm-4
Try this:
<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>
In that way you can have your well centered.
You can also do this
<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>
To make your well centered on desktop view 1280px and above.