How to vertically align text field with it's label and button - twitter-bootstrap-3

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>

Related

Add Vertical Lines inside Cards

I want to make such a card with a bootstrap meaning I want to divide it into three parts regardless of what the card contains of data and icons
But I was not able to divide it into three parts, how can I do that?
And I was able to display the card in this way:
How can i solve this problem?
Card.vue:
<template>
<div>
<div class="card bg-light mb-3 mr-50" style="max-width: 25rem; height: 10rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make</p>
</div>
</div>
</div>
</template>
<script>
</script>
<style>
</style>
Is this what your looking for ? You can use bootstrap grid for this, Checkout the docs
.row{
background-color: #efefef;
}
.col{
background-color: white;
margin: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<div class="container-fluid">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
</div>

How to prevent bootstrap from "drop" at mobile screen size?

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>

change input style of upload

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>

Cannot bottom align image in jumbotron

I'm trying to bottom align an img in a jumbotron, but cannot figure it out.
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-lg-8">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="col-lg-4 text-center">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
</div>
</div>
I tried adding the following to the CSS
.vertical-bottom {
display: flex;
align-items: bottom;
}
And then added the additional class to the DIV containing the img
<div class="col-lg-4 text-center vertical-bottom">
This didn't work, why is it so hard to vertically align things in bootstrap?
Here a kind of code:
Bootply
Css:
The media query is set to 1200 because I see you're using col-lg-xx
#media screen and (min-width:1200px) {
.flex_container img{
object-fit: contain;
object-position: 100% 100%;
}
.flex_container {
display: flex;
}
}
Html:
<div class="jumbotron">
<div class="container">
<div class="row flex_container">
<div class="col-lg-8">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="col-lg-4 text-center flex_container">
<img src="http://via.placeholder.com/200x200" style="">
</div>
</div>
</div>
</div>

Input group addon alignment

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>