How can I get bootstrap to equal align my radio form to have my question and three answers split into 4 columns like col-sm-3. I want it to wrap the text in each column when its too long. example form below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form class="form-check-inline">
<label class="control-label">This is some question: </label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio" checked>Option 1 which is really long and spans most of the page compared to the other options
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio">Option 2 is a small option
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width
</label>
</form>
</div>
</body>
</html>
I would like the check box to be split into columns and wrap the input text
Form control: inline radio buttons
The form below contains three inline radio buttons:
This is some question: | Option 1 which is really long | Option 2 is a small | option Option 3 is another long option which
| and spans most of the page compared | | i would prefer was wordwrapped and options
| to the other options | | divided equally over
the | char here i have added just to indicate columns, i dont expect them to actually be present in the output.
You're not using the container-row-column classes correctly -- <div class="container"><div class="row"><div class="col-xs-12">... Refer to Bootstrap 3.4.1 documentation for more information.
Additionally, the latest Bootstrap version is 4.6 with 5.0 in public beta, consider updating your Boostrap version.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
</div>
</div>
<form class="form-check-inline row">
<div class="col-xs-3">
<label class="control-label">This is some question:</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input checked class="form-check-input" name="optradio" type="radio">Option 1 which is really long and spans most of the page compared to the other options</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 2 is a small option</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width</label>
</div>
</form>
</div>
</body>
</html>
Related
I am trying to create a selection in which I have two radio buttons of same group and some text in between. Like single correct MCQ...
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
</head>
<body>
<input type="radio"> This_1 <br>
or <br>
<input type="radio"> This_2
</body>
</html>
Now what I want is that user can select only one of the radio button.
However, as soon as I add OR in between, the radio buttons divide into two groups. And instead I can select both of them,u know what I'm saying...
Please help is really appreciated.
Thank you so much!!
Do you mean like this?:
<p>Select an option:</p>
<div>
<input type="radio" id="1" name="options" value="1"
checked>
<label for="huey">1</label>
</div>
<p>TEXT 1</p>
<div>
<input type="radio" id="2" name="options" value="2">
<label for="dewey">2</label>
</div>
<p>TEXT 2</p>
<div>
<input type="radio" id="3" name="options" value="3">
<label for="louie">3</label>
</div>
I'm trying to create an Emmet (+TAB) shortcut and I have 90% of it complete. I just can't figure out how to get the last nested elements to be on their own lines. The label, input and closing div tag are all on one line. I'd like to have them all on separate lines
snippet.json code
"form+": "section.form-container>div.form-wrapper>form:post>(div.form-group>label+inp)+btn:s"
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<section class="form-container">
<div class="form-wrapper">
<form action="" method="post">
<div class="form-group"><label for=""></label><input type="text" name="" id=""></div>
<button type="submit"></button>
</form>
</div>
</section>
Trying to get it to look like this automatically
<section class="form-container">
<div class="form-wrapper">
<form action="" method="post">
<div class="form-group">
<label for=""></label>
<input type="text" name="" id="">
</div>
<button type="submit"></button>
</form>
</div>
</section>
</body>
</html>
In this case, the element layout is controlled by inline_break option of output profile, which acts globally for all snippets expanded by Emmet. You can reduce inline_break to 2, it will cause elements to lay out as expected
Thank you in advance - I am a complete beginner (1 week) to coding including HTML/CSS and have been unable to find a specific solution to the following criteria for a form I have built. I am trying to understand how to implement the following conditions in an external CSS file:
-the form is X pixels wide when the screen is greater than or equal to X pixels wide;
-the form uses a grid layout to layout labels and form elements when the screen is greater than or equal to X pixels wide;
-the form is the width of the screen when the screen is less than X pixels wide;
-the form lays out the labels and form elements as full width when the screen is less than X pixels wide
The above criteria is for an assessment which is why I have included a screenshot and not modifiable code (I am not looking for a handout), but I could really use some guidance on the basics needed in order to get started. I've tried several combinations of #media, class and max-width, and have watched several tutorials but these seem geared towards basic width and height modifications using class, which I still do not fully understand.
HTML Code
Thank you again and I appreciate any feedback - I'm excited to learn more!
Consider looking into BootStrap which is a grid based system for dividing up the page intelligently based on the Viewport size.
https://getbootstrap.com/docs/4.0/components/forms/
Quick getting start intro:
https://getbootstrap.com/docs/4.4/getting-started/introduction/
You can include Bootstrap into your pages quickly using the CDN.
Some code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Pet Owner Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter pet owner email" name="pet_owner_email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Pet Type:</label>
<select multiple class="form-control" id="exampleFormControlSelect2" name="pet_type">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="hamster">Hamster</option>
<option value="other">Other</option>
<option value="zebra">Zebra</option>
</select>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I'm developing a web application using bootstrap. It has to run in different Browsers.
I have multiple groups with Headlines and checkboxes, which are looking like this:
<div>
<h4>Liniensicherungen</h4>
<div class="form-group ">
<label for="cbxGrundliniensicherung" class="col-sm-6 col-form-label">Mit Grundliniensicherung:</label>
<div class="col-sm-6 paddingRadioBtn">
<input class="form-control" type="checkbox" name="cb_mit_grund_liniensicherung_runs_show" id="cbxGrundliniensicherung">
</div>
<div>
<div>
It is working in Firefox and IE but in Chrome the checkboxes (and radiobuttons) are looking different. They are bigger and have a small grey border above.
as below it looks in Firefox.
And as below is how it looks in Chrome.
Does anyone know, how to change the look in Chrome?
First of all in checkbox you don't want to add form-control, that class creates big checkbox so, remove it
for checkbox there is default class called form-check-input and for real position you need to add form-check in parent class but if you dont want to add this stuff there is OK !
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style></style>
</head>
<body>
<div>
<h4>Liniensicherungen</h4>
<div class="form-group ">
<label for="cbxGrundliniensicherung" class="col-sm-6 col-form-label">Mit Grundliniensicherung:</label>
<div class="col-sm-6 paddingRadioBtn form-check">
<input class="form-check-input" type="checkbox" name="cb_mit_grund_liniensicherung_runs_show" id="cbxGrundliniensicherung">
</div>
<div>
<div>
<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="js/main.js"></script> -->
<script></script>
</body>
</html>
usually the form-control is used for text area but if you want to use it you can override the css or you can use the custom input checkbox
.form-control{width:20px!important;
font-size:5px!important;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div>
<h4>Liniensicherungen</h4>
<div class="form-group ">
<label for="cbxGrundliniensicherung" class="col-sm-6 col-form-label">Mit Grundliniensicherung:</label>
<div class="col-sm-6 paddingRadioBtn">
<input type="checkbox" class="form-control"aria-label="Text input with checkbox" name="cb_mit_grund_liniensicherung_runs_show" id="cbxGrundliniensicherung">
</div>
<div>
<div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
HTML Noob here: I am trying to get two MDC radio buttons in a form to appear aligned on separate rows (one below another). I have tried putting break tags in various places but it doesn't seem to have any effect.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shrine (MDC Web Example App)</title>
<link rel="shortcut icon" href="https://material.io/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>
<form action="home.html">
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div><br>
<label for="radio-1">Radio 1</label>
</div>
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="radio-2">Radio 2</label>
</div>
<br>
</form>
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
</body>
</html>
I can get standard radio buttons to appear on separate rows using break tags as follows:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
How can I get these radio-1 and radio-2 to appear on separate rows?
I think you just entered the brake at the wrong spot, it should be between the two divs of the "mdc-form-fields":
<label for="radio-1">Radio 1</label>
</div>
<br>
<div class="mdc-form-field">
<div class="mdc-radio">
There are other solutions with a grid system, but this is the simple one