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>
Related
I can't figure out why my button isn't aligned with the input field. I use bootstrap as example
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="row">
<div class="d-flex flex-row">
<div class="col-8">
<div class="form-group">
<label>Search:</label>
<input type="text" name="name" id="search-id" autocomplete="off" class="form-control" placeholder="Required" />
</div>
</div>
<div class="col-1">
<div class="">
<button class="btn btn-primary" onclick="load();">Load</button>
</div>
</div>
</div>
</div>
simply move the label outside of the flex-container:
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<label>Search:</label>
<div class="row">
<div class="d-flex flex-row">
<div class="col-8">
<div class="form-group">
<input type="text" name="name" id="search-id" autocomplete="off" class="form-control" placeholder="Required" />
</div>
</div>
<div class="col-1">
<div class="">
<button class="btn btn-primary" onclick="load();">Load</button>
</div>
</div>
</div>
</div>
Here is the Update markup
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="container">
<p>Search</p>
<div class="row d-flex justify-content-flex-end">
<div class="col-8">
<div class="form-group">
<input type="text" name="name" id="search-id" autocomplete="off" class="form-control" placeholder="Search Here" />
</div>
</div>
<div class="col-1">
<div class="">
<button class="btn btn-primary" onclick="load();">Load</button>
</div>
</div>
</div>
</div>
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>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Win the week web portal portal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='main.css')}}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js">
</head>
<body>
<div class="container-fluid" id="main">
<div class="row">
<div class="col-sm-8">
<img class="img-fluid" src="{{url_for('static',filename='images/image.png')}}" id="sideimage">
</div>
<div class="col-sm-4">
<div class="container" id ="inbound1">
<h3 id="tophead1">WELCOME TO</h2><br>
<h2 id="tophead2">Win The Week Web<sup id="sup">TM</sup> Portal</h2>
<h5 id="tophead3">Scorecard</h5>
<img class="img-fluid" src="{{url_for('static', filename='images/logo.png')}}" id="logo">
</div>
<div class="container" id ="inbound2">
<form action="#" method="post" name="formdata">
<label for="username" id="label1"><strong>Username:</strong></label>
<input type="email" name="username" id="username" required>
<br>
<label for="password" id="label2"><strong>Password:</strong></label>
<input type="password" name="password" id="password" placeholder="Password" required>
<br>
<div class="container">
<button class="btn btn-primary" id="login" name="login" type="submit" value="Login">Login</button>
</div>
<h4 id="tophead4" >Forgot password?
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The code above does contains the body part but it is not showing in the debugger console. I tried remove caching, installing different browsers, but all in vain.
I am trying to learn flask and that is why the url path is specified differently.
You are missing a </script> tag in your header this will fix the problem you are having.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Win the week web portal portal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='main.css')}}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
</head>
<body>
<div class="container-fluid" id="main">
<div class="row">
<div class="col-sm-8">
<img class="img-fluid" src="{{url_for('static',filename='images/image.png')}}" id="sideimage">
</div>
<div class="col-sm-4">
<div class="container" id ="inbound1">
<h3 id="tophead1">WELCOME TO</h2><br>
<h2 id="tophead2">Win The Week Web<sup id="sup">TM</sup> Portal</h2>
<h5 id="tophead3">Scorecard</h5>
<img class="img-fluid" src="{{url_for('static', filename='images/logo.png')}}" id="logo">
</div>
<div class="container" id ="inbound2">
<form action="#" method="post" name="formdata">
<label for="username" id="label1"><strong>Username:</strong></label>
<input type="email" name="username" id="username" required>
<br>
<label for="password" id="label2"><strong>Password:</strong></label>
<input type="password" name="password" id="password" placeholder="Password" required>
<br>
<div class="container">
<button class="btn btn-primary" id="login" name="login" type="submit" value="Login">Login</button>
</div>
<h4 id="tophead4" >Forgot password?
</form>
</div>
</div>
</div>
</div>
</body>
</html>
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.