i am trying to design a upload form which looks like this
this is what i have so far but i can not make it the way i want to
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Upload">Upload Your CV here</label>
</div>
here is a fiddle of what i have so far:
https://jsfiddle.net/kunz/6sr9wfxn/
You'll need to change the font around to get that one but I think this should get you going in the right direction
.custom-file-label[data-browse]::after {
border-radius: 25px;
background-color: orange;
color: white;
width: 8em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<h3>
Careers
</h3>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label text-center" for="customFileLangHTML" data-browse="Upload">Upload Your CV here</label>
</div>
Related
For example, I have this
.form-group select {
display: inline;
}
<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>
<div class="col-xs-12">
<div class="form-group form-inline">
<input class="form-control" type="number" name="currency_from_amount" id="currency_from_amount">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
When the screen become smaller, the dropdownlist "drop" into another row which is not what I want. How do I maintain to make it inline (two columns in one row) even it is mobile size?
Expected output is:
But current output is
Here is the solution for your expected output. You need to wrap the input and select box in a row by specifying the col size as per your requirement.
.container {
padding: 10px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
<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>
<div class="container">
<div class="row">
<div class="form-group col-xs-6">
<input class="form-control " type="number" name="currency_from_amount" id="currency_from_amount">
</div>
<div class="form-group col-xs-2 nopadding">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<input class="form-control " type="number" name="currency_from_amount" id="currency_from_amount">
</div>
<div class="form-group col-xs-2 nopadding">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
</div>
I'm basically trying to have this kind of layout:
Label TextField Button
So e.g:
Number of copies [5 ] [Add]
Thought that would be really simple to do. But I've struggled for a few hours now, and this is the closest I've come, which is absolutely terrible:
Here's my code:
<div class="row col-md-12">
<form class="form-inline pull-right">
<div class="form-group">
<label for="numberOfCopies">Number of copies</label>
<input size="1" type="text" class="form-control" id="numberOfCopies">
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
At first some Bootstrap-Basics:
your 'row-div' should be wrapped by a 'container-div'
row and col-xx-x classes need to be on their own div-tags
as you can see at the example below, you could easily get this done using css.
With display: flex; we get all elements of the form-group side by side.
With white-space: nowrap we 'tell' the label to be shown as one-line only.
Using the margin-tags we will get the elements to the right position.
To learn more take a look at the documentations of display, white-space and margin.
I think the usage of input-groups could be interesting, too. Feel free to ask per comment, if anything is unclear.
.form-group.flex {
display: flex;
}
.form-group.flex label {
white-space: nowrap;
margin-top: 7px;
}
.form-group.flex input {
margin: 0 7px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline pull-right">
<div class="form-group flex">
<label for="numberOfCopies">Number of copies</label>
<input size="1" type="text" class="form-control" id="numberOfCopies">
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
</div>
</div>
so I am designing a survey form that will not appear until 'take Survey' link in the page is clicked. However I have not been successful in getting the modal box to appear on that same page for further styling. I have done everything required as stated in W3schools'bootstarp modal box but so far no solution. here is my code:
:root{
--headcolor: rgba(45, 45, 45, 0.2);
}
.heading{
border: 2px solid green;
margin-top: 5px;
}
#content{
margin: auto;
}
.tree {
position: relative;
top: 250px;
left: 10px;
color: #000;
text-decoration: none;
cursor: pointer;
width: 135px;
}
.tree:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.tree:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#title{
margin: 40px auto;
text-align: center;
padding: 40px 200px;
background: var(--headcolor);
}
#description{
text-align: center;
}
label{
margin-left: 20px;
}
<!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>Survey Form</title>
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<h3 class="tree" id="content" data-toggle="modal" data-target="#myModal">Take Survey</h3>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<!-- <button type="button" class="close" data-dismiss="modal">×</button> -->
<!-- <h4 class="modal-title">Modal Header</h4> -->
<h1 id="title">Customer Feedback Survey</h1>
</div>
<div class="modal-body">
<!-- <p>Some text in the modal.</p> -->
<p id="description">How can we improve our services? We Value your feedback so thank you for taking your time.</p><br>
<!-- <h6>We Value your feedback so thank you for taking your time</h6><br>
<br> -->
<p>Parts marked with '*' are compulsory!</p>
<form action="" id="survey-form">
<fieldset>
<legend>Biodata:</legend>
<label for="salutation">Salutation :</label>
<select id="dropdown">
<option>Mr</option>
<option>Miss</option>
<option>Mrs</option>
<option>Dr</option>
<option>Prof</option>
<option>Engr</option>
<option>Surv</option>
<option>Chief</option>
</select>
<label for="name">*Name :</label>
<input type="text" id="name" name="name" value="First name Last name">
<label for="email">*Email :</label>
<input type="text" id="email" name="email" value="example#example.com">
<label for="age"> Age :</label>
<input type="number" id="number" name="age">
</fieldset><br><br>
<!-- Level of satisfaction -->
<fieldset>
<legend>On a scale of 1 to 5 how are you likely to recommend us :</legend>
<input id="vs" type="radio" name="levels" value="vs">
<label for="vs">Very Satisfied</label><br>
<input id="ss" type="radio" name="levels" value="ss">
<label for="ss">Somewhat Satisfied</label><br>
<input id="ud" type="radio" name="levels" value="ud">
<label for="ud">Undecided</label><br>
<input id="us" type="radio" name="levels" value="us">
<label for="us">Unsatisfied</label><br>
<input id="vu" type="radio" name="levels" value="vu">
<label for="vu">Very Unsatisfied</label>
</fieldset><br>
<fieldset>
<legend>Which services would you like us to improve on?</legend>
<input id="newbie" type="checkbox" name="levels" value="newbie">
<label for="newbie">Car Wash</label><br>
<input id="intermediate" type="checkbox" name="levels" value="intermediate">
<label for="intermediate">Laundry</label><br>
<input id="master" type="checkbox" name="levels" value="master">
<label for="master">Upholstery Wash</label><br>
<input id="guru" type="checkbox" name="levels" value="guru">
<label for="guru">Dish Wash</label><br>
<input id="guru" type="checkbox" name="levels" value="guru">
<label for="guru">Toy Wash</label>
</fieldset>
<br>
<fieldset>
<legend>Comments/Suggestions</legend>
<textarea name="message" rows="5" cols="45">
</textarea>
</fieldset>
<br>
<input type="submit" name="submit" value="Submit">
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
</div>
</div>
<!-- Modal content ends -->
</div>
</div>
<!-- Modal ends -->
<script src="../assets/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap.js needs jquery to work.
Your code works here: https://codepen.io/anon/pen/ERbGWJ
I used the same code as your question and loaded jquery before bootstrap.js
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
Why dont I see the input group addon just beside the textbox ?
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
</head>
<style>
input
{
max-width: 280px;
}
</style>
<body>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" />
<span class="input-group-addon" id="basic-addon1">#</span>
</div>
</body>
</html>
What do I need to do to display the content of the span after the textbox adjacent to it without any gap.
Your problem is the max-width you are putting on the input. try putting it on the input-group instead like:
.input-group {
max-width: 280px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon1">#</span>
</div>
I have a question about the grid system in Bootstrap. I seems to work great, but there are no margins between the "boxes". for example if I have this:
<div class="column">
<div class="span11">
</div>
<div class="span11">
</div>
</div>
This works great. But there is no space between then. So do I assign an "id" and edit it myself though CSS code? Is this the right way to do it? for example:
<div class="column">
<div id="box_1" class="span11">
</div>
<div id="box_2" class="span11">
</div>
</div>
and one more thing, as for borders, colors, do I do the same ?
thanks
First there's no .column in twitter bootstrap but .row
If you want left/right margin use a span10 with offset1
If you want top/bottom margin creat a new .row and apply a class like .show-grid
For borders and colors use classes for generic and ids for specific.
You can create your mockup on jsFiddle like this http://jsfiddle.net/baptme/EHutn/
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<style>
.show-grid {
margin-bottom: 20px;
margin-top: 10px;
}
.show-grid [class*="span"] {
background-color: #EEEEEE;
border-radius: 3px 3px 3px 3px;
line-height: 30px;
min-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row show-grid">
<div class="span10 offset1">
<p>bla bla bla</p>
</div>
</div>
<div class="row show-grid">
<div class="span10 offset1">
<p>bla bla bla</p>
</div>
</div>
</div>
</body>
</html>