Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I would like to know if its OK for me to include a header/s (h1) inside a form-group? I have added a simple form to the snippet for an example.
I am not super clear on if I can or cannot include it in this way? Just want to make sure I am doing it correctly.
The reason why I am doing it like this, is because the headers align perfectly flush with left-hand side of the form, otherwise nesting them outside the form-group makes them sit further to the left.
So, are they similar to the legend property in a form if I wish to use headers instead?
Cheers!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-12">
<form>
<div class="form-group">
<h1>Form details</h1>
<h4>Please fill out this form</h4>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</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-default">Submit</button>
</form>
</div>
</div>
It's okay, but not good for SEO, you miss h2 and h3 header between your headers
Related
This question already has answers here:
Put icon inside input element in a form
(21 answers)
Search input with an icon Bootstrap
(8 answers)
How can I make an icon inside of a bootstrap 5 form-floating label clickable?
(1 answer)
Closed 5 months ago.
I'm trying to put an icon of Fontawesome inside an <input>, but I'm unable to do it. Is my first time using this icons.
I need them where the red circle is:
How can I do it?
I tried using differents position and some flex I couldn't do it.
This is my html:
<div class="mb-4 col-6 mx-auto">
<label for="password" class="form-label col-lg-offset-2">Password</label>
<span id="newPass" class="see_pass mx-3"><i id="eyeNewPass" class="fa-solid fa-eye"></i></span>
<input id="newPass" type="password" class="form-control" name="password" value="#ViewData["pass1"]" required />
</div>
Because all the style that I'm using is from Bootstrap 5 I can't show you what I'm using.
I need that the icon can be used, not only to decorate the input. When I click on it, the password is shown
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.css" integrity="sha384-X8QTME3FCg1DLb58++lPvsjbQoCT9bp3MsUU3grbIny/3ZwUJkRNO8NPW6zqzuW9" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="mb-4 col-6 mx-auto">
<label for="password" class="form-label col-lg-offset-2">Password</label>
<span id="newPass" class="see_pass mx-3"><i id="eyeNewPass" class="fa-solid fa-eye"></i></span>
<input id="newPass" type="password" class="form-control" name="password" value="#ViewData[" pass1 "]" required />
</div>
Can anyone help me?
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
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
<div class="ddown">
<button class="dbtn">ABC</button>
</div>
I want to make this div hide/show when a checkbox is checked/unchecked, how can I achieve this?
try The following code
<input type="checkbox" ng-model="chkCondition">
<div class="ddown" ng-show="chkCondition">
<button class="dbtn">ABC</button>
</div>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Check to show/Hide a div:
<input type="checkbox" ng-model="chkCondition">
<div class="ddown" ng-show="chkCondition">
<button class="dbtn">ABC</button>
</div>
</body>
</html>
html
<input type="checkbox" ng-model="isChecked" />
<div ng-show="isChecked" class="ddown">
<button class="dbtn">ABC</button>
</div>
Try with using ng-if to avoiding DOM element creation.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<input type="checkbox" ng-model="isChecked">
<div class="ddown" ng-if="isChecked">
<button class="dbtn">ABC</button>
</div>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I'm looking for a way to make some CSS only apply if an input outside the style sheet has a certain value.
In the example below I only want to run the CSS if the input value below is "4625585".
It is from a form where the submit button sends the input value (among other things).
Is that possible at all when I only have access to CSS and not the HTML code of the form.
Kindly, Rasmus
-
Here is the CSS
<style type="text/css">
.wForm {
font-family: sans-serif;
}
</style>
<input value="4625585">
-
Here is the HTML:
<form>
<div id="tfa_6" class="wForm">
<input type="text" placeholder="Name">
</div>
<div class="actions">
<input type="submit" value="Submit">
</div>
<input value="4626442">
</form>
You can only apply CSS to a sibling that follows the element that's validated. Therefore I moved the input element with value 4625585 to the top in the form.
If you don't have access to the HTML, you will need javascript.
input[value="4625585"] ~ .wForm {
background: red;
}
<form>
<input value="4625585">
<div id="tfa_6" class="wForm">
<input type="text" placeholder="Name">
</div>
<div class="actions">
<input type="submit" value="Submit">
</div>
</form>
The issue was commented on and answered in a deleted threat. This short answer is "no, it can't be done".
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to have two-column registration form using bootstrap 3, other pages of my website are fine except the registration page. My input fields and labels scattered all over the screen on the right side because I am using col-md-6 for to divide the page into two. The page looks like this now.
As you can see, the right side is idk, they are scattered. How to fix this side? My code is something like this in both sides:
<div class="container">
<div class="row">
<!-- start code on the left side of the page -->
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label"><font color="red"><b>*</b></font> First Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="firstname" id="firstname"
placeholder="Firstname" onKeyPress="return ValidateAlpha(event);" onblur="toUpper(this.value, this.id);"/>
</div>
</div>
</div>
<!-- left code ends here -->
<!-- start code on the right side of the page -->
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label"><font color="red"><b>*</b></font> E-mail</label>
<div class="col-sm-5 ">
<input type="text" class="form-control" name="email" id="email" placeholder= "email"
ondrop="return false;" onpaste="return false;" /></span>
</div>
</div>
</div>
<!-- right code ends here -->
</div>
</div>
Look at the codepen I've made for you
http://codepen.io/creativemind1/pen/QNYqqN
Kindly remove the !important from the css and make changes in your style.css
EDIT: You are not suppose to give any classes in label and <div class="col-md-6"> before input as it will automatically align for you.
Try clearfix class in bootstrap.
Codepen example http://codepen.io/smallyin/pen/vGbegv