I am trying to implement a login page using bootstrap like this:
But for some reason, the div I want to use to put a logo, can't be full width.
JSFIDDLE ONLINE DEMO
Clearly the w-100 it's not working properly.
How can I make this div full width?:
<div style="background-color:#193D4C;" class="w-100">
<h3 class="text-light">Sign In</h3>
</div>
So in the JSFidle is this line, the 4th line after the Body tag.
<div class="col-md-4 col-sm-12 shadow-lg p-5 bg-light">
p-5 is adding padding x5 to the main box. You can remove p-5 altogether to have no padding at all. Your heading should then stretch to the edges.
But then you will maybe want to put margin or padding on the other inner elements such as the form. This is because removing the p-5 will likely push those elements to the edge of the box also.
Here is your full BODY from JSFiddle. I have removed the p-5 padding and added p-3 padding to the Sign In Title and the Form. Hopefully this works :)
<body>
<div class="container-fluid vh-100" style="margin-top:300px">
<div class="" style="margin-top:200px">
<div class="rounded d-flex justify-content-center">
<div class="col-md-4 col-sm-12 shadow-lg bg-light">
<div style="background-color:#193D4C;" class="w-100 p-3">
<h3 class="text-light">Sign In</h3>
</div>
<form action="" class="p-3">
<div class="p-4">
<div class="input-group mb-3">
<span class="input-group-text bg-primary"><i
class="bi bi-person-plus-fill text-white"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-3">
<span class="input-group-text bg-primary"><i
class="bi bi-key-fill text-white"></i></span>
<input type="password" class="form-control" placeholder="password">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Remember Me
</label>
</div>
<button class="btn btn-primary text-center mt-2" type="submit">
Login
</button>
<p class="text-center mt-5">Don't have an account?
<span class="text-primary">Sign Up</span>
</p>
<p class="text-center text-primary">Forgot your password?</p>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
````
Related
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
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>
When adding form-group with an input, the input field will not go to 100% width of the form group which is already the width of the card.
I've tried adding styles for width directly to the parent element and to the input element itself.
<div class="container-fluid d-flex justify-content-center">
<div class="card d-flex justify-content-center" style="background-color:dodgerblue; height:60vh; width:40vw; border-radius:20px">
<div class="card-body ml-4 mt-3 text-center">
<div class="row ml-4">
<div class="form-group mr-5" style="display: inline-block; width: 100%; vertical-align: middle;">
<label for="cardNumber">Card number</label>
<div class="input-group">
<input type="text" name="cardNumber" placeholder="Your card number" class="form-control" required>
</div>
</div>
</div>
<a class="btn btn-primary text-center mt-3" href="">Continue</a>
</div>
</div>
</div>
You can see what I mean in this fiddle window, the input will not span 100% width of the card.
You have to add bootstrap cdn/url. Check this jsfiddle
<div class="container-fluid d-flex justify-content-center">
<div class="card d-flex justify-content-center" style="background-color:dodgerblue; height:60vh; width:40vw; border-radius:20px">
<div class="card-body ml-4 mt-3 text-center">
<div class="row ml-4" >
<div class="form-group mr-5" style="display: inline-block; width: 100%; vertical-align: middle;">
<label for="cardNumber">Card number</label>
<div class="input-group">
<input type="text" name="cardNumber" placeholder="Your card number" class="form-control" required>
</div>
</div>
</div>
</div>
</div>
</div>
Figured this out and it was an extremely basic thing that i missed.
I removed the "max-width" of the inputs that comes in the site.css file by default.
thanks for the response!
I have a contact form (a bunch of input/span elements) nested in a Boostrap col. As the browser shrinks, the input fields shrink to an undesirable size.
I have tried adding various col-breakpoints, which sort-of works, but it looks funky and still shrinks too much until it hits the breakpoint. I have also looked for a way to specify a min-width of sorts, but haven't had luck with that either.
<!-- Custom CSS -->
.input-group-text {
width: 40px;
}
.input-group-text span {
margin: 0 auto;
}
.body-main-bg {
background-color: #eeeeee;
}
<!-- Contact Form -->
<div class="container-fluid">
<div class="row body-main-bg justify-content-center">
<div class="col-4 my-3 text-center">
<h4>Contact Us</h4>
</div>
</div>
<form id="contact-form" method="" action="">
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-user"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-envelope"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-ellipsis-v"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Subject">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-pencil"></span>
</span>
</div>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<button class="btn btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</form>
</div>
If you change col-4 to col-lg-4 or col-md-4 you will have the desired layout.
The issue is that with col-4 you are essentially saying "stay this width on all devices". When col-lg-4 or col-md-4 are responsive and set divs to be 100% on large/medium devices and down.
See bootstraps grid options here: https://getbootstrap.com/docs/4.3/layout/grid/