In the below HTML code the btnContinue appears beneanth txtClientID how can i make btnContinue appear next to txtClientID. style="float: right; didn't help.
Snippet :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Client ID</label>
<input type="text" id="txtClientID" name="clientID" class="form-control input-md" />
<button type="button" id="btnContinue" class="btn btn-success" ng-click="SetEverifyAccount()">
<i ng-if="IsSaving" class="fa fa-spinner fa-pulse"></i> Continue
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I think you want something like this :
.control-label {
padding-top: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-12 form-group">
<label class="control-label col-xs-2">Client ID</label>
<div class="col-xs-7">
<input type="text" id="txtClientID" name="clientID" class=" form-control input-md" />
</div>
<button type="button" id="btnContinue" class="btn btn-success col-xs-3" ng-click="SetEverifyAccount()">
<i ng-if="IsSaving" class="fa fa-spinner fa-pulse"></i> Continue
</button>
</div>
</div>
Also check : Align to right with offset
How about wrapping all of them inside an input-group?
Checkout my fiddle. It could be helpful.
Snippet from fiddle :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" id="txtClientID" name="clientID" class="form-control input-md" placeholder="Client ID"/>
<span class="input-group-btn">
<button type="button" id="btnContinue" class="btn btn-success" ng-click="SetEverifyAccount()">
<i ng-if="IsSaving" class="fa fa-spinner fa-pulse"></i> Continue
</button>
</span>
</div>
The best option is to use another div and flexbox and make it display: flex; flex-basis: row; and maybe justify-content: space-between but not necessarily.
Related
I have downloaded a login template for a project and I am trying to add a logo to the site.
Below is the html code I'm using
.logo{
position:absolute;
top: 5%;
left: 10%;
height: 100px;
width: 100px;
}
<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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/login.css">
<title>RNL Trading intern</title>
<link rel="icon" type="image/x-icon" href="img/test-image.png">
</head>
<body >
<div class="logo" src="icons/test-image.png" alt="rnl-logo"></div>
<div class="d-flex align-items-center light-blue-gradient" style="height: 100vh;">
<div class="container" >
<div class="d-flex justify-content-center">
<div class="col-md-6">
<div class="card rounded-0 shadow">
<div class="card-body">
<h3>Log in</h3>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email</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">Wachtwoord</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group 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">Login</button>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</div>
</body>
</html>
The favicon works so the image source is valid. I wrote a little css to size up the image and position it to the top left:
This is what shows up on the page after refreshing cache:
<div class="logo" src="icons/test-image.png" alt="rnl-logo"></div>
You can't use an image directly without using img tag.
The correct way should be :
<div class="logo">
<img class="" src="./icons/test-image.png" alt="rnl-logo">
</div>
OR:
<img class="logo" src="./icons/test-image.png" alt="rnl-logo">
Reference : : The Image Embed element
I'm currently using Bootstrap 4 for a project in a JavaScript course im following, and im doing the HTML, but i've run into an issue with the input-group-addon class on a span. It's not showing like the icon is showing in the tutorial
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Loan Calculator</title>
</head>
<body class="bg-dark">
<div class="contr">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Loan Calculator</h1>
<form id="loan-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span id="input-group-addon">%</span>
<input type="number" class="form-control" id="interest" placeholder="Interest Rate">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
Your structure and class names are a little bit off. You need a span.input-group-text nested inside a div.input-group-prepend
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
.input-group-addon does not appear in the v4.0 documentation that was for v3.
I'm trying to force a search box to take up the entire width of the container, but I can only ever get it to take up roughly half the width. Here is some representative code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
<div class="input-group-append">
<button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
</div>
</div>
</div>
</div>
And a link to JSFiddle: http://jsfiddle.net/ovLab58u/
I've followed every one of the answers listed here, and nothing seems to be working: Bootstrap 4 inline form full width
Just add display: block style to the div having class input-group either as inline style or as external css class
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" style="display: block;">
<input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
<div class="input-group-append">
<button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
</div>
</div>
</div>
</div>
I just add bootstrap v4.4 CDNs from https://getbootstrap.com/docs/4.4/getting-started/introduction/ to your code and also add a "div closed tag" that you did not closed in your code. and it works correctly. like the code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
<div class="input-group-append">
<button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
</div>
</div>
</div>
</div>
</div>
<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 making the use of modal in my tutorial project and I have used
bootstrap modal class on the "Add post" click.
But the problem is when I am clicking on the Add Post nothing is
happening
I am not able to find the error.
If any one knows what is the issue do suggest me.
I have added $("[data-toggle='modal']").modal(); in my script too.
Below is my code:
<!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>Blogen</title>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<!-- HEADER -->
<header id="main-header" class="py-2 bg-primary text-white">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1><i class="fas fa-cog"></i> Dashboard</h1>
</div>
</div>
</div>
</header>
<!-- ACTIONS -->
<section id="actions" class="py-4 mb-4 bg-light">
<div class="container">
<div class="row">
<div class="col-md-3">
<a
href="#"
class="btn btn-primary btn-block"
data-toggle="modal"
data-target="#addPostModal"
>
<i class="fas fa-plus"></i> Add Post
</a>
</div>
</div>
</div>
</section>
<!-- MODALS -->
<!-- ADD POST MODAL -->
<div class="modal fade" id="addPostModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title">Add Post</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label for="category">Category</label>
<select class="form-control">
<option value="">Web Development</option>
<option value="">Tech Gadgets</option>
<option value="">Business</option>
<option value="">Health & Wellness</option>
</select>
</div>
<div class="form-group">
<label for="image">Upload Image</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="image" />
<label for="image" class="custom-file-label"
>Choose File</label
>
</div>
<small class="form-text text-muted">Max Size 3mb</small>
</div>
<div class="form-group">
<label for="body">Body</label>
<textarea name="editor1" class="form-control"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">
Save Changes
</button>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer id="main-footer" class="bg-dark text-white mt-5 p-5">
<div class="container">
<div class="row">
<div class="col">
<p class="lead text-center">
Copyright ©
<span id="year"></span>
Blogen
</p>
</div>
</div>
</div>
</footer>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
<script>
//get the current year of copyright
$("#year").text(new Date().getFullYear());
$("[data-toggle='modal']").modal();
CKEDITOR.replace("editor1");
</script>
You have included these scripts two times in your code, remove one of them also remove this line $("[data-toggle='modal']").modal(); from your javascript and try this JSFiddle
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<!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>Blogen</title>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header id="main-header" class="py-2 bg-primary text-white">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1><i class="fas fa-cog"></i> Dashboard</h1>
</div>
</div>
</div>
</header>
<!-- ACTIONS -->
<section id="actions" class="py-4 mb-4 bg-light">
<div class="container">
<div class="row">
<div class="col-md-3">
<a
href="#"
class="btn btn-primary btn-block"
data-toggle="modal"
data-target="#addPostModal"
>
<i class="fas fa-plus"></i> Add Post
</a>
</div>
</div>
</div>
</section>
<!-- MODALS -->
<!-- ADD POST MODAL -->
<div class="modal fade" id="addPostModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title">Add Post</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label for="category">Category</label>
<select class="form-control">
<option value="">Web Development</option>
<option value="">Tech Gadgets</option>
<option value="">Business</option>
<option value="">Health & Wellness</option>
</select>
</div>
<div class="form-group">
<label for="image">Upload Image</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="image" />
<label for="image" class="custom-file-label"
>Choose File</label
>
</div>
<small class="form-text text-muted">Max Size 3mb</small>
</div>
<div class="form-group">
<label for="body">Body</label>
<textarea name="editor1" class="form-control"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">
Save Changes
</button>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer id="main-footer" class="bg-dark text-white mt-5 p-5">
<div class="container">
<div class="row">
<div class="col">
<p class="lead text-center">
Copyright ©
<span id="year"></span>
Blogen
</p>
</div>
</div>
</div>
</footer>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
<script>
//get the current year of copyright
$("#year").text(new Date().getFullYear());
//$("[data-toggle='modal']").modal();
CKEDITOR.replace("editor1");
</script>
</body>
</html>
Demo
//get the current year of copyright
//$("#year").text(new Date().getFullYear());
//$("[data-toggle='modal']").modal();
CKEDITOR.replace("editor1");
$("#year").replaceWith(new Date().getFullYear());
<!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>Blogen</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css" />
<!-- HEADER -->
<header id="main-header" class="py-2 bg-primary text-white">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1><i class="fas fa-cog"></i> Dashboard</h1>
</div>
</div>
</div>
</header>
<!-- ACTIONS -->
<section id="actions" class="py-4 mb-4 bg-light">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="#" class="btn btn-primary btn-block" data-toggle="modal" data-target="#addPostModal">
<i class="fas fa-plus"></i> Add Post
</a>
</div>
</div>
</div>
</section>
<!-- MODALS -->
<!-- ADD POST MODAL -->
<div class="modal fade" id="addPostModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title">Add Post</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label for="category">Category</label>
<select class="form-control">
<option value="">Web Development</option>
<option value="">Tech Gadgets</option>
<option value="">Business</option>
<option value="">Health & Wellness</option>
</select>
</div>
<div class="form-group">
<label for="image">Upload Image</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="image" />
<label for="image" class="custom-file-label">Choose File</label
>
</div>
<small class="form-text text-muted">Max Size 3mb</small>
</div>
<div class="form-group">
<label for="body">Body</label>
<textarea name="editor1" class="form-control"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">
Save Changes
</button>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer id="main-footer" class="bg-dark text-white mt-5 p-5">
<div class="container">
<div class="row">
<div class="col">
<p class="lead text-center">
Copyright ©
<span id="year"></span> Blogen
</p>
</div>
</div>
</div>
</footer>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
<script>
</script>
I'm using Bootstrap 3. How I can make the search button connected to the input?
Like:
|INPUT|SEARCH| <== they are together
<!-- 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="col-xs-7 form-group">
<input ng-if="filterOption == 'Account ID'"
uib-tooltip="Search by Account ID"
validator="/^[0-9]{1,15}$/"
validator-invoke="watch"
validator-error="Account ID must have 1 to 15 digits."
type="number"
placeholder="Search by Account ID"
ng-model="accountID"
min="1">
</div>
<div class="col-xs-5">
<button class="btn btn-default w100"
type="button"
ng-click="searchCustomer()">Search</button>
</div>
You're looking for an input-group
EG:
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Username">
</div>
Make them share parent div so they can align next to each other.
<!-- 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=" col-xs-7 form-group">
<input ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
min="1">
<button class="btn btn-default w100" type="button" ng-click="searchCustomer()">Search</button>
</div>
To work, you must add Bootstrap 04 :
<!-- 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">
<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="input-group mb-3 col-xs-7 form-group">
<input ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
min="1" class="form-control" >
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="searchCustomer()">Search</button>
</div>
</div>
<!-- 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 style="margin-top:30px;" class=" col-xs-7 form-group">
<input style="margin-right: -7px;height: 32.5px;" ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
min="1">
<button class="btn btn-default w100" type="button" ng-click="searchCustomer()">Search</button>
</div>
you can use
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
for furter information go to https://getbootstrap.com/docs/3.3/components/
Something like this could be helpful?
I think this can be a good guideline Bootstrap-3-input-groups
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>
<body>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</body>