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
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
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 am new to bootstrap and learning it.I am trying to create an form page like this which i had made in JSP .This is a part of the page.
But when trying with bootstrap , all i could come up was something like this. I would like to know which form / guideness on how to proceed to recreate the content .I tried using plain html . But i couldnt come up with a form like the one i made in JSP
Try something like:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label 1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label 2</label>
<input class="form-control" type="text" />
</div>
</div>
</form>
Based on:
Bootstrap 3 2-column form layout
I am working on a requirement where the input group contains two text-boxes separated by input-group-addon. The problem I am facing is I am not able to set the width of the text-boxes using bootstrap css. The first text-box should be wider than the second text-box.
JSFiddle: https://jsfiddle.net/Vimalan/5eqdkveb/3/
Current:
The textbox before and after delimiter are of same size.
Expected:
The textbox after delimiter should be small. I am more interested in a solution which uses bootstrap css and not custom css.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Approval Number</label>
<div class="col-xs-9">
<div class="input-group">
<input type="text" class="form-control input-sm" id="ApprovalNumberTextBox" />
<span class="input-group-addon">Delimiter</span>
<input type="text" class="form-control input-sm" id="ApprovalNumberDelimiterTextBox" />
</div>
</div>
</div>
</div>
I don't get why you are not able to set text-boxes width?!
You can simply add css rule to the input you want and set its width, like
<style>
#ApprovalNumberDelimiterTextBox {
width:40%;
}
</style>
and it is working Here or there is another problem I don't get?