I embedded a radio button in two cards. To group them together I nested the two cards inside a btn-group.
This works very well but the layout crashes on small display sizes.
When it shrinks down to xs the two columns should fill one whole row but it doesn't happen. The second card vanishes you can't scroll to it.
I tried a lot but I can't make it work on small screens.
When I omit the radio group wrapper the layout works but obviously my radio buttons don't.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- Grid row -->
<div class="row">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<div class="col-12 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Card Title 1</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-users light-blue-text"></i>
</div>
</div>
<p class="grey-text">Paragraph 1.</p>
<label id="label1" class="btn btn-secondary active" for="input1">
Radio1
<input type="radio" id="input1"
name="name1"
value="val1" checked>
</label>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-md-6 mb-lg-0 mb-4">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Card title 2</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-user light-blue-text"></i>
</div>
</div>
<p class="grey-text">Card paragraph 2.</p>
<label id="label2" class="btn btn-secondary" for="radio2">
<input type="radio" id="radio2"
name="name1"
value="val2">
Radio 2</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not working but not layout breaking:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- Grid row -->
<div class="row">
<div class="col-12 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Card Title 1</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-users light-blue-text"></i>
</div>
</div>
<p class="grey-text">Paragraph 1.</p>
<label id="label1" class="btn btn-secondary active" for="newSurgery">
Radio1
<input type="radio" id="input1"
name="name2"
value="val1" checked>
</label>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-md-6 mb-lg-0 mb-4">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Card title 2</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-user light-blue-text"></i>
</div>
</div>
<p class="grey-text">Card paragraph 2.</p>
<label id="label2" class="btn btn-secondary" for="radio2">
<input type="radio" id="radio2"
name="name2"
value="val2">
Radio 2</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Your second snippet works fine, you just got the for attribute wrong on the 1st label, so you need to click the actual radio button to see it working.
If you change the for attribute, from the non existent newSurgery to input1, it will work as expected:
<label id="label1" class="btn btn-secondary active" for="input1">
<!-- not for="newSurgery"-->
Radio1
<input type="radio" id="input1" name="name2" value="val1" checked>
</label>
I don't think radio buttons have anything to do with their surrounding HTML elements. You just need to have the same name for them:
<input type="radio" id="input1" name="HAVE_TO_BE_THE_SAME" value="val1" checked />
<input type="radio" id="input2" name="HAVE_TO_BE_THE_SAME" value="val2" />
The name is what groups the radio buttons together. You can have different id and value. The label for attribute points to the id of the element, not the name.
And you have too many unnecessary row and column markups. Try to read the bootstrap documentation one more time.
<div class="container-fluid">
<div class="row">
<!--
By default, the div is displayed as block so you don't need
`col-12` unless they're not displayed as block and you force them
to.
-->
<div class="col-md-6">
<div class="card"> ... </div>
</div>
<div class="col-md-6">
<div class="card"> ... </div>
</div>
</div>
</div>
fiddle: http://jsfiddle.net/aq9Laaew/250477/
Related
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>
````
How can I create a multiple input with checkbox on the left and two lines each one with an .
Here´s the code that I´m using:
<div class="container-fluid">
<div class="col-md-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" id="idays">
</div>
<input type="text" class="form-control" id="days1" disabled="" maxlength="10">
<input type="text" class="form-control" id="days2" disabled="" maxlength="10">
</div>
</div>
</div>
And I want something similar to this:
two inputs
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-1 d-flex align-items-center justify-content-center">
<input type="checkbox">
</div>
<div class="col-11 pl-0">
<div class"row">
<div class="col-12">Option 1</div>
<div class="col-12">Option 2</div>
</div>
</div>
</div>
</div>
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 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/
Issue Details
When I resize the browser, it displays like this...
I am sorry, Can't show the image due to low reputation points.
Further, when I decrease the browser size, it displays like this...
I am sorry, Can't show the image due to low reputation points.
My JS Fiddle is here
Am I missing anything in below code?
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<main class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card">
<div class="card-header">Login</div>
<div class="card-body">
<form role="form" class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label for="Email Address" class="control-label">UserName Or EmailAddress</label>
<input type="text" name="Email Address" class="form-control">
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label for="Password" class="control-label">Password</label>
<input type="password" name="Password" class="form-control">
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="form-group">
<button type="button" class="btn btn-primary" >
Login
</button>
<a class="btn btn-link" title="Forgot Password">Forgot Password</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>