I am creating a form that is wrapped inside a card in bootstrap. It worked fine on my pc. However, my page is unresponsive when it comes to small screens because of it. What is wrong?
The code is too long to paste here but here is the code where the card is:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row row-content justify-content-center">
<div class="col-xs-12 col-sm-8 ">
<div class="card ">
<h3 class="card-header badge-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form>
<div class="form-group row">
<label class="col-form-label col-xs-12 col-sm-2" for="tables">Number of Guests</label>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables1" id="tables1">
<label for="tables1" class="fom-check-label">1</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables2" id="tables2">
<label for="tables2" class="fom-check-label">2</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables3" id="tables3">
<label for="tables3" class="fom-check-label">3</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables4" id="tables4">
<label for="tables4" class="fom-check-label col-xs-2">4</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables5" id="tables5">
<label for="tables5" class="fom-check-label">5</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables6" id="tables6">
<label for="tables6" class="fom-check-label">6</label>
</div>
</div>
<div class="form-group row">
<label for="time" class="col-12 col-md-2 col-form-label">Date and Time</label>
<div class="col-12 col-md-5">
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
<div class="col-12 col-md-5">
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
'''
P.S. I have no CSS related to it yet.
Your problem is position row and col-*. Then I changed radio button name for same name=tables because if a different name can't changed a pill.
Here an example:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row row-content justify-content-center">
<div class="col-xs-12 col-sm-8 ">
<div class="card ">
<h3 class="card-header badge-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-lg-3">
<label class="col-form-label" for="tables">Number of Guests</label>
</div>
<div class="col-md-6">
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables1">
<label for="tables1" class="fom-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables2">
<label for="tables2" class="fom-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables3">
<label for="tables3" class="fom-check-label">3</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables4">
<label for="tables4" class="fom-check-label col-xs-2">4</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables5">
<label for="tables5" class="fom-check-label">5</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables6">
<label for="tables6" class="fom-check-label">6</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="time" class="col-form-label">Date and Time</label>
</div>
<div class="col-6 col-md-4">
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
<div class="col-6 col-md-4">
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Related
I want my Bootstrap 3 radio buttons to appear inline, not horizontally stacked. I followed:
https://mdbootstrap.com/docs/standard/forms/radio/
To get:
<form data-toggle="validator" role="form" id="showProgramTableForm">
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<button type="button" id="addProgramBtn" class="btn btn-large btn-primary" >Add Program</button>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rbProgramAll" name="rbProgramAll">
<label class="form-check-label" for="rbProgramAll">All programs</label>
</div>
<!-- Material inline 2 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rbProgramGroup" name="rbProgramGroup">
<label class="form-check-label" for="rbProgramGroup">My Group's programs</label>
</div>
<!-- Material inline 3 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rbProgramMine" name="rbProgramMine">
<label class="form-check-label" for="rbProgramMine">My programs</label>
</div>
</div>
</div><!-- /container -->
</form>
These are stacked horizontally.
This works:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<input type="radio" id="rbProgramAll" name="rbProgram">
<label class="radio-inline" for="rbProgramAll">All programs</label>
<input type="radio" id="rbProgramGroup" name="rbProgram">
<label class="radio-inline" for="rbProgramGroup">My Group's programs</label>
<input type="radio" id="rbProgramMine" name="rbProgram">
<label class="radio-inline" for="rbProgramMine">My programs</label>
</div>
I want a text input to take 12 col in card in bootstrap 4 when screen is xs but it takes only less than half
<div class="form-check form-check-inline">
<div class="col-12">
<div class="col-12 col-sm-2">
<label class="form-check-label">Date and Time</label>
</div>
<div class="col-12 col-sm-5">
<div class="form-check-inline">
<input type="text" class="form-check-input" placeholder=" Date">
</div>
</div>
<div class="col-12 col-sm-5">
<div class="form-check-inline">
<input type="text" class="form-check-input" placeholder=" Time">
</div>
</div>
</div>
</div>
the link of screenshot is here screenshot
You should add <div class="col-xs-12" like below.
<div class="form-check form-check-inline">
<div class="col-12">
<div class="col-12 col-sm-2 col-xs-12">
<label class="form-check-label">Date and Time</label>
</div>
<div class="col-12 col-sm-5 col-xs-12">
<div class="form-check-inline">
<input type="text" class="form-check-input" placeholder=" Date">
</div>
</div>
<div class="col-12 col-sm-5 col-xs-12">
<div class="form-check-inline">
<input type="text" class="form-check-input" placeholder=" Time">
</div>
</div>
</div>
</div>
I am using bootstrap 4 for styling purposes, for that reason. I am stuck in an alignment problem, that is I want my buttons to be parallel to the date and time fields above them.
The Blue cross in the image shows that my buttons are currently starting from there, which I don't want.
The Redline indicates that from here my buttons and all fields should start, I have tried out many combinations of offsets and flexbox from bootstrap griding, but I am unable to resolve this problem.
Attached is the code:
<form>
<div class="form-group row">
<label for="Number of Guests" class="col-md-2 col-form-label">Number of Guests</label>
<div class="col-md-10">
<div class="row">
<!-- Material inline 1 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline1">1</label>
</div>
<!-- Material inline 2 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline2">2</label>
</div>
<!-- Material inline 3 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline3">3</label>
</div>
<!-- Material inline 4 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline1">4</label>
</div>
<!-- Material inline 5 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline2">5</label>
</div>
<!-- Material inline 6 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline3">6</label>
</div>
</div>
</div>
</div>
<div class="row col-md-10">
<label for="section" class="col-12 col-md-2 col-form-label">Section</label>
<div class="form-group row ">
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</div>
<div class="row col-md-10">
<label for="dateandtime" class="col-12 col-md-2 col-form-label">Date and Time</label>
<div class="col-6 col-md-3">
<input type="date" class="form-control" id="date" placeholder="Date">
</div>
<div class="col-6 col-md-3">
<input type="time" class="form-control" id="time" placeholder="Time">
</div>
</div>
<div class="row col-md-10">
<div class="form-group row">
<div class="offset-md-1 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-1 col-md-12">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</form>
I can only suggest you read this page.
https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap uses a grid system with 12 columns per row. I can see you are using different classes together which are not meant to be mixed.
For starters, your buttons are mixed with cols and rows. This is not how it is meant to be used.
<div class="row col-md-10">
<div class="form-group row">
<div class="offset-md-1 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-1 col-md-12">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
I suggest you start with the simpler solution as provided in the link.
A row with 2 columns. See where that gets you.
<div class="row">
<div class="col-sm">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
<div class="col-sm">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
I believe you're looking for a result similar to this, not all the id's and classes may be the same but this snippet is more of an opportunity for you to learn rather than to copy. Please review my code and try to understand the differences between what you had and the example I've provided.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Number of Guests
</label>
</div>
<div class="col-md-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">6</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Section
</label>
</div>
<div class="col-md-10">
<button class="btn btn-secondary" type="submit">
Cancel
</button>
<button class="btn btn-primary" type="submit">
Reserve
</button>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Date & Time
</label>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-6">
<input id="date" class="form-control" type="date">
</div>
<div class="col-6">
<input id="time" class="form-control" type="time">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-secondary" type="submit">
Cancel
</button>
<button class="btn btn-primary" type="submit">
Reserve
</button>
</div>
</div>
</form>
I hope this was helpful, best of luck!
So there's a few things as to why these elements aren't aligning properly:
You should never use .row & .col in the same class, instead you should lay them out like so:
<form>
<div class="row">
<div class="col-md-4">
I am a column on the left (4/12)
</div>
<div class="col-md-10">
I am a column on the right (10/12)
</div>
</div>
</form>
Secondly, I noticed in some places you have a row next to a column. This isn't very good practice. If you want subcolumns, this should be done like so:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-md-4">
I am inside of a larger column
</div>
<div class="col-md-10">
So am I!
</div>
</div>
</div>
</div>
It may help you to read up a bit more on the Bootstrap 4 grid documentation, which can be found here.
I hope this helps clear a few things up, let me know if you're still a bit stuck.
try this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<form>
<div class="container-fluid">
<div class="row my-4">
<div class="col-md-2">
<label for="Number of Guests" class="col-form-label">Number of Guests</label>
</div>
<div class="col-md-10">
<div class="row">
<!-- Material inline 1 -->
<div class="form-check form-check-inline ml-3">
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1">1
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">2
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio3">
<input type="radio" class="form-check-input" id="radio3" name="optradio" value="option2">3
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio4">
<input type="radio" class="form-check-input" id="radio4" name="optradio" value="option1" >4
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio5">
<input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">5
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio5">
<input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">6
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-2">
<label for="section" class="col-form-label">Section</label>
</div>
<div class="col-md-10">
<div class="form-group ">
<button type="submit" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-2">
<label for="dateandtime" class="col-form-label">Date and Time</label>
</div>
<div class="col-md-10">
<div class="form-group d-flex">
<input type="date" class="form-control col-md-3" id="date" placeholder="Date">
<input type="time" class="form-control col-md-2 ml-3" id="time" placeholder="Time">
</div>
</div>
</div>
<div class="row my-4">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
My checkbox is currently aligned like this -
I want to move it to the marked/pointed location below -
I'm using Bootstrap 4. Following is my HTML -
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row form-group">
<label class="col-md-1 col-form-label" for="director">Director</label>
<div class="col-md-8">
<input class="form-control" type="text" id="director" name="director" placeholder="Director">
</div>
</div>
<div class="row form-group form-check">
<div class="col">
<input class="form-check-input" type="checkbox" id="released" name="released">
<label class="form-check-label" for="released">Released</label>
</div>
</div>
<div class="row form-group">
<label class="col-md-1 col-form-label" for="year">Year</label>
<div class="col-md-8">
<input class="form-control" type="text" id="year" name="year" placeholder="Year">
</div>
</div>
As simple as
<div class="row form-group">
<div class="col-md-11 offset-md-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="released" name="released">
<label class="form-check-label" for="released">Released</label>
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/L1krytub/4/
IMO, I kind of think col-md-1 is not wide enough for your labels though.
Now I tried classes .pull-right and .float-right to place my radio buttons at the right end. Its not working. Coding and Picture below.
<div class="row ">
<div class="form-group col-lg-6">
<div class="row">
<label class="Bold">Is Valid</label>
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</div>
</div>
<div class="form-group col-lg-6">
<div class="row">
<label class="Bold">Is Checked</label>
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</div>
</div>
</div>
Screenshot
I want like the below image(just a sample)
You will need to wrap your radio buttons to a div .form-group and use [bootstrap4 flex utilities] classes d-flex justify-content-between to align them
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row ">
<div class="form-group col-lg-6">
<div class="d-flex justify-content-between">
<label class="Bold">Is Valid</label>
<div class="form-group">
<input class="radio-inline" type="radio">Yes
<input class="radio-inline" type="radio">No
</div>
</div>
</div>
<div class="form-group col-lg-6">
<div class="d-flex justify-content-between">
<label class="Bold">Is Checked</label>
<div class="form-group">
<input class="radio-inline" type="radio">Yes
<input class="radio-inline" type="radio">No
</div>
</div>
</div>
</div>
</div>
You need to include bootstrap.min.css and wrap the radio buttons in <span> and give it float:right
.radio-group{
float:right;
}
.formrow {
margin-right: 0px !important;
margin-left: 0px !important;
}
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="row formrow">
<div class="form-group col-lg-6">
<div class="row formrow">
<label class="Bold">Is Valid</label>
<span class="radio-group">
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</span>
</div>
</div>
<div class="form-group col-lg-6">
<div class="row formrow">
<label class="Bold">Is Checked</label>
<span class="radio-group">
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</span>
</div>
</div>
</div>