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>
Related
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>
I'm trying to build a simple email form like in the Bootstrap 4 docs but for some reason the formatting is wrong.
This is what the example looks like:
But for some reason this is what it compiles to in my project:
Clearly there's something in my codebase/environment that's messing with the layout. Why are my fields not in separate rows like the example? Why is there no spacing between elements? Why is the submit button not blue? It's a mess. Is my bootstrap 4 dependency not installed properly?
I'm using the exact html from the example. Code below.
<template>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter 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">
</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>
</template>
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// #ts-ignore
createApp(App).use(store).use(router).mount('#app')
if you are looking for a simple solution for a static website or basic stuff
all you need to do is to add this cdn to your html
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
and this bootstrap javascript cdn for dropdowns and navbar
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
and the jQuery cdn
check this link for a live preview
https://stackblitz.com/edit/web-platform-ss4nvu?file=script.js
basicly this
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
at the head tag :)
but i see that you mentioned vue js in the tags you are looking for an answer so i also recommend on going throw the website of vueJS bootstrap which is amazing if you have any trouble i am available also in gmail :)
dolev146#gmail.com
You forgot to link css files from bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
copy paste it in the head of your html
also read the get started documentation: bootstrap get started doc
I know this is a question that has a number of threads on here however after trying several of the suggested answers I am having no such luck.
I am not new to programming however I am new to CSS and HTML.
Currently I am trying to create a basic "Login Page" for my personal web application.
GitHub: https://github.com/n-winspear/cashflow-webapp
From reading other threads on here I have tried:
- Adding heights to columns, rows and containers.
- Changing the container type
- Using many different classes (center-text, justify-content-center, align-self-center, align-items-center)
- Changing the form type
- Loading the CSS directly from a URL instead of a local file
<div class="container-fluid">
<div class="form-row align-items-center">
<div class="col-sm-4 offset-sm-4">
<form class="form-signin">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter 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">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
What I was hoping to get was the form sitting in the middle of the web page however it stays stuck at the top.
Here is what I am currently getting
i cloned your project and made some modifications on it, and it works well, so what you must do is:
create a style.css file in your css folder (much cleaner code)
add a link to your new stylesheet in html and add an id to your container so that you can identify it (in case if you are going to add other containers later,you will need to add an id), so your final html code will look like that:
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type"text/css" href="bootstrap/css/styles.css">
<title>Cashflow Web App</title>
</head>
<body>
<div class="container-fluid" id="main-block">
<div class="form-row align-items-center">
<div class="col-sm-4 offset-sm-4">
<form class="form-signin">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter 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">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
in style.css file, use display:table and display: table-cell, simply write the following code:
body{
height: 100%;
}
#main-block{
height: 100%;
display: table;
}
.align-items-center{
display: table-cell;
vertical-align: middle;
}
Here's how it looked after i added these modifications, i hope this helps you.enter image description here
feel free to ask any other question if it doesn't work for you.
You can use the absolute position trick to vertically center the div, or use Flex on the body container and VH units. In this case I would go with the absolute position.
Absolute:
.container-fluid {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Flex Body:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
I am using bootstrap 3.3.7 and bootstrap datepicker v1.6.4. I have embedded the datepicker inside a div with class col-md-6, but it doesn't seem fill up the column.
HTML code:
<div class="form-group">
<label class="control-label col-lg-5 text-left">Select Date:</label>
<div class="col-lg-6">
<input type="text" class="form-control" placeholder="Choose your date..." readonly>
<div id="datepicker" data-date-format="mm/dd/yyyy"></div>
</div>
</div>
CSS:
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Bootstrap Datepicker -->
<link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
JavaScript:
<!-- Bootstrap Datepicker -->
<script src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
datepicker-image
datepicker-image
Is there a way to fix this? Thanks in advance for the suggestions.
it seems to be some left padding on component. Find the source of this styling and overwrite it
.datepicker-inline class may includes some padding or width constaint or perhaps inherits it from some other class
I created this page with bootstrap but it only responsive when I am changing the size of the browser's width. When I am changing the height of the browser, it is not responsive. What I did wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="fullname">Name</label>
<input type="text" id="fullname" name="fullname" class="form-control"/>
</div>
<div class="form-group">
<label for="comments">Comments</label>
<textarea rows="5" cols="40" id="comments" name="comments" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="luckynumber">Lucky Number</label>
<select name="luckynumber" id="luckynumber" class="form-control">
<option>double zero</option>
<option>seven</option>
<option>thirteen</option>
</select>
</div>
<div class="checkbox">
<label><input type="checkbox" value="dog"/>Own a dog</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="cat"/>Own a cat</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="owned"/>Owned by a cat</label>
</div>
<span><b>Your favorite weather?</b></span><br/>
<div class="radio">
<label><input type="radio" name="count" value="hot"/>hot</label>
</div>
<div class="radio">
<label><input type="radio" name="count" value="cold"/>cold</label>
</div>
<div class="radio">
<label><input type="radio" name="count" value="rainy"/>rainy</label>
</div>
<input type="submit" class="btn btn-primary" value="submit"/>
</form>
</body>
</html>
Twitter Bootstrap framework responsiveness is based on the viewport width, not height. You will have to use your own approach to handle this. Perhaps setting the body and html in your css to height: 100% may be a start. But as I said, with Bootstrap alone, you won't be able to create responsiveness based in the height of the viewport.
Bootstrap is based on media queries.
For example:
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
It depends only on the width.
If you want use it by height check this response: Twitter Bootstrap 3 responsive full height grid