My only problem is that the button is not in the same line as the span.
How do I fix this?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td>
<span>Hello</span>
<div class="text-right">
<button class="btn btn-default">Test</button>
</div>
</td>
You could float the .text-right for example. See my example here.
.text-right {
float: right;
}
.text-right {
float: right;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td>
<span>Hello</span>
<div class="text-right">
<button class="btn btn-default">Test</button>
</div>
</td>
You could use flexbox to easily achieve this:
.wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="wrapper">
<span>Hello</span>
<div class="text-right">
<button class="btn btn-default">Test</button>
</div>
</div>
Related
Hope you're fine.
What I'm trying to do is using an icon with fontawesome, and be able to use it as a button. Here is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row text-center">
<div class="col-6 align-items-stretch">
<i class=""></i>
<p class="h5">Mail</p>
</div>
<div class="col-6 align-items-stretch">
<p class="h5">LinkedIn</p>
</div>
</div>
</div>
</body>
</html>
But if you are looking at the result, the icon is now bleu and there is a line under it. Is it possible to not have this color and remove the line under the icon please ?
Cordially
You will need to add some extra CSS to do this. This can help
a{
text-decoration:none;
color:orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<style>
a{
text-decoration:none;
color:orange;
}
</style>
</head>
<body>
<div class="container">
<div class="row text-center">
<div class="col-6 align-items-stretch">
<i class=""></i>
<p class="h5">Mail</p>
</div>
<div class="col-6 align-items-stretch">
<p class="h5">LinkedIn</p>
</div>
</div>
</div>
</body>
</html>
How about this css code?
a {
text-decoration: none;
color: red;
}
I have a setup just like the one I replicated.
I wanted to put the checkbox vertically aligned in the middle (same height as the other col) so it doesn't look so strange.
Any idea how to achieve this?
label {
display: block !important;
}
.col-xs-6 {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-6">
<label>Hello</label>
<input type="text" placeholder="Hello" />
</div>
<div class="col-xs-6">
<label>
<input type="checkbox" />
World
</label>
</div>
</div>
You should start by giving the row a display: flex then you should reset the label's margin.
Then you could center the div by either using margin: auto 0; or align-self: center; both will work. I would also recommend upgrading to bootstrap 4. Here is a tool to help you upgrade to bootstrap 4
label {
display: block !important;
margin-bottom: 0;
margin-top: 0;
}
.row {
display: flex;
}
.col-xs-6 {
border: 1px solid red;
}
.align-self-center {
align-self: center;
/* margin: auto 0; */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-6">
<label>Hello</label>
<input type="text" placeholder="Hello" />
</div>
<div class="col-xs-6 align-self-center">
<label>
<input type="checkbox" />
World
</label>
</div>
</div>
label {
display: block !important;
}
.col-xs-6 {
border: 1px solid red;
}
.row{
display:flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-6">
<label>Hello</label>
<input type="text" placeholder="Hello" />
</div>
<div class="col-xs-6">
<label>
<input type="checkbox" />
World
</label>
</div>
</div>
So I am creating a form where we have an upload button in a card. The result was that the <label> and the image aligned properly but the <button> element was not shown below the label. I have even tried to use bootstrap classes such as ml-5 and such but still it doesn't work. I want the button to be placed below the label but the problem is: it comes on the same line as shown in the image:
I want it to look something like this:
Is there any way we can align the button below the label. It should look like the image above.
The code:
.img-wrapper {
display: block;
width: 6.4rem;
line-height: 15px;
margin-left: 6rem;
float: right;
}
.img-wrapper img {
display: inline;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card bg-light mb-3">
<div class="card-body">
<label for="profile">Upload a Profile image:</label>
<button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
<input type="file" name="profile" id="profile" hidden=""/>
<div class="img-wrapper">
<img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You can use this code:
.img-wrapper {
display: block;
width: 6.4rem;
line-height: 15px;
margin-left: 6rem;
float: right;
}
.img-wrapper img {
display: inline;
border-radius: 50%;
}
.card-body{
display: flex;
justify-content: space-between;
}
.card-content{
display: flex;
flex-direction: column;
align-items: flex-start;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card bg-light mb-3">
<div class="card-body">
<div class="card-content">
<label for="profile">Upload a Profile image:</label>
<button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
</div>
<input type="file" name="profile" id="profile" hidden=""/>
<div class="img-wrapper">
<img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Wrap these elements in a div:
<div style="display: inline-block">
<label for="profile">Upload a Profile image:</label>
<button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
</div>
and add display: inline-block to your button.
.d-inline {
display: inline-block;
}
You can change the button class to d-block from d-inline and put <div class="img-wrapper"> before it.
<label for="profile">Upload a Profile image:</label>
<div class="img-wrapper">
<img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
</div>
<button type="button" class="btn btn-primary d-block" id="upload">Upload</button>
<input type="file" name="profile" id="profile" hidden=""/>
as you are using bootstrap, so it will be very easy for you to do this.
let me show you how it ll work:
<div class="row">
<div class="col-8 col-md-8 col-sm-8 col-lg-8"> // here you can specify cols on your own
<div class="row">
//your label and ll go here
</div>
<div class="row">
//button ll go here
//it ll create a new line but within this parent div
</div>
</div>
<div class="col-4 col-md-4 col-sm-4 col-lg-4">
// your image code ll go here
</div>
</div>
it ll give you button at bottom of the label and also image ll be placed as before with using standard bootstrap 4 classes only...
Thank you!
Happy coding!!
I'm trying to make a select button with an input on the right.
I'm trying to use bootstrap but I can't seem to make the select fill the input-group-addon.
Any ideas?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<td class="form-group">
<div class="col-xs-12 input-group">
<div class="input-group-addon">
<select>
<option>+351</option>
</select>
</div>
<input class="form-control">
</div>
</td>
There is no direct support from Bootstrap for this case, but there's a workaround for this problem. Just insert an empty .input-group-addon element between your form elements, e.g.:
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
Here is a working example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="input-group">
<select class="form-control input-group-addon">
<option>+351</option>
</select>
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
<input class="form-control">
</div>
I have simple input group and works great.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td class="form-group">
<div class="col-xs-7 input-group">
<span class="input-group-addon"><span><b>+49</b></span></span>
<input name="newMobileNumber" validator="/^(\d{11})$/" maxlength="11" id="newMobileNumber" validator-invoke="watch" validator-error="fehlerhafte Mobilfunknummer-Eingabe" ng-model="vm.MobileChangeData.NewMobileNumber" class="form-control" placeholder="Neue Mobilfunknummer"
required>
</div>
</td>
But I want a span in front of the +49 instead of the input.
I tried:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td>
<div class="col-xs-7">
<span class="input-group-addon"><span><b>+49</b></span></span>
<span>3124214214125</span>
</div>
</td>
But everything is messed up.
Any idea?
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td>
<div class="col-xs-7 input-group">
<span class="input-group-addon"><span><b>+49</b></span></span>
<span class="form-control">3124214214125</span>
</div>
</td>
because you have not added input-group in parent div
see bellow updated code :
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td>
<div class="col-xs-7 input-group">
<span class="input-group-addon"><span><b>+49</b></span></span>
<span>3124214214125</span>
</div>
</td>