I'm new to Website design with Bootstrap and I just made this simple start here which looks alright but needs some adjustment to be more uniform and pretty.
As you can see here the Jumbotron I've used seems fairly centered but the Well and Search Bar underneath it does not. I would like some help so that I can make it fit better together :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="header-container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron" style="width: 100%">
<h1>Cool Text</h1>
<p>Catchphrase</p>
</div>
</div>
</div>
</div>
</div>
<div class="search-bar-container">
<div class="well">
<div class="container">
<div class="row">
<div class="col-lg-12">
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You're using class="navbar-form" which is meant for use inside a navbar, that's why it won't occupy 100% of the div it's in.
Depending on if you doing anything else inside these container, you currently don't need to use any columns or rows. I've also add some padding to your jumbotron for under 768px becauseyou'' see the text float up to the edge of the div otherwise.
See example Snippet.
#media (max-width: 767px) {
.jumbotron.jumbotronic {
padding-left: 20px;
padding-right: 20px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well well-sm">
<h3>Without Col/Row</h3>
</div>
<div class="header-container">
<div class="container">
<div class="jumbotron jumbotronic">
<h1>Cool Text</h1>
<p>Catchphrase</p>
</div>
</div>
</div>
<div class="search-bar-container">
<div class="container">
<div class="well">
<form role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<hr>
<div class="well well-sm">
<h3>With Col/Row</h3>
</div>
<div class="header-container">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron jumbotronic">
<h1>Cool Text</h1>
<p>Catchphrase</p>
</div>
</div>
</div>
</div>
</div>
<div class="search-bar-container">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="well">
<form role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Something like this, container has some predefined width and margin:
<div class="header-container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron" style="width: 100%">
<h1>Cool Text</h1>
<p>Catchphrase</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="search-bar-container">
<div class="well">
<div class="row">
<div class="col-lg-12">
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Try this.
#media screen and (max-width: 768px) {
.container .jumbotron, .container-fluid .jumbotron {
padding-right: 19px;
padding-left: 19px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container header-container">
<div class="jumbotron">
<h1>Cool Text</h1>
<p>Catchphrase</p>
</div>
<form class="search-bar-container well" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
</body>
</html>
Related
I currently have this as part of my script, the header and 2 paragraphs are being centered properly, but container and button are off to the left side. I have tried using <center> </center> but I don't know where to properly apply them for the form and button to be centered.
Screenshot of what needs to be centered:
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="jumbotron text-center">
<h1>Header Text</h1>
<p>Paragraph</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="file" name="excelDoc" id="excelDoc" class="form-control" />
</div>
</div>
<div class="col-md-4">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
</div>
</form>
</div>
Add 'text-center' class to the row and edit the 'col' classes to have 12 as a sum
<div class="container" >
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row text-center">
<div class="col-md-2"></div>
<div class="col-md-4">
<div class="form-group">
<input type="file" name="excelDoc" id="excelDoc" class="form-control" />
</div>
</div>
<div class="col-md-3">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
<div class="col-md-3"></div>
</div>
</form>
</div>
Check out this code:
<div class="text-center">
<h1>Header Text</h1>
<p>Paragraph</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-4">
<div class="custom-file" id="customFile" lang="es">
<input type="file" class="custom-file-input">
<label class="custom-file-label" for="exampleInputFile">
Choose file...
</label>
</div>
</div>
<div class="col-12 col-md-1">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
</div>
</form>
</div>
Hope this helps.
Issue Details
When I resize the browser, it displays like this...
I am sorry, Can't show the image due to low reputation points.
Further, when I decrease the browser size, it displays like this...
I am sorry, Can't show the image due to low reputation points.
My JS Fiddle is here
Am I missing anything in below code?
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<main class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card">
<div class="card-header">Login</div>
<div class="card-body">
<form role="form" class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label for="Email Address" class="control-label">UserName Or EmailAddress</label>
<input type="text" name="Email Address" class="form-control">
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label for="Password" class="control-label">Password</label>
<input type="password" name="Password" class="form-control">
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="form-group">
<button type="button" class="btn btn-primary" >
Login
</button>
<a class="btn btn-link" title="Forgot Password">Forgot Password</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
I created a simple modal, but when I click the button the modal appears at the very top of the page and there is no fade in animation when the modal appears. There is no background behind the modal that covers the entire web application as well. I set the correct classes, but still no luck.
Here is my button:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
Add Function
</button>
The modal itself:
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h1>Lab 6</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #e0e9f5">
<h2 class="panel-title">Employee Function - Add</h2>
</div>
<div class="panel-body">
<div class="well">
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Code:
</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Description:
</h5>
</div>
<div class="col-md-6">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Legacy Function Code:</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Active?</h5>
</div>
<div class="col-md-1">
<input type="radio">
<h5>Yes</h5>
</div>
<div class="col-md-2">
<input type="radio">
<h5>No</h5>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6" align="right">
<button type="button" class="btn btn-info btn-lg">Save</button>
</div>
<div class="col-md-6" align="left">
<button type="button" class="btn btn-warning btn-lg"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an example is what I would like to achieve:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
Any help is appreciated. Thank you.
I believe that you have simply forgotten to add boostrap CSS + JS or jQuery. Below is a code snippet, with your exact code, but with boostrap CSS + JS and jQuery included. Note that jQuery must be before the boostrap JS link, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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>
All of that should go in the <head> tag (or at the bottom of the <body> tag)
<!-- Stuff for the <head> tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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>
<!-- end <head> tag -->
<!-- Stuff for the <body> -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
Add Function
</button>
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h1>Lab 6</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #e0e9f5">
<h2 class="panel-title">Employee Function - Add</h2>
</div>
<div class="panel-body">
<div class="well">
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Code:
</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Description:
</h5>
</div>
<div class="col-md-6">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Legacy Function Code:</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Active?</h5>
</div>
<div class="col-md-1">
<input type="radio">
<h5>Yes</h5>
</div>
<div class="col-md-2">
<input type="radio">
<h5>No</h5>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6" align="right">
<button type="button" class="btn btn-info btn-lg">Save</button>
</div>
<div class="col-md-6" align="left">
<button type="button" class="btn btn-warning btn-lg" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
P.S. The result looks better when you expand the snippet before running it, because otherwise the output has a small width which messes things up (which could be an issue on small devices)
I want to place the search button in the column next to the input form using the Bootstrap grid, but since both the "input" tag and "button" tag must be in the div with the "form-group" attribute, this makes things difficult.
This is my original code:
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
And this is my failed attempt with nested columns:
<div class="row">
<div class="col-md-12 formMove">
<div class="row">
<div class="col-md-10">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div> <!--I want this closing tag to close "col-md-10", but its closing the "form-group"-->
<div class="col-md-2">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks in advance.
I could not understand why do you need button and input within the same form-group class, as you can use separate form-group class for them.
The approach through which in line forms are achieved is using .form-inline class with the<form> tag. As you wanted an answer using grid system I have provide a snippet for that also.
I have added two snippet
using .form-inline class
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="form-group">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
<br><div id="errors"></div>
</form>
</div>
</div><!--end row-->
</body>
</html>
using bootstrap grid system
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
</div>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
</body>
You can see in my Demo that the buttons aren't aligned correctly :-(
Is it possible to:
1) have a space between the input field and the buttons &
2) have the buttons vertically aligned correctly?
Demo: https://jsfiddle.net/xg69pkt0/
Code:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-4 control-label">Postcode</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="concept" name="concept">
<div class="input-group-btn">
<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue" align="top" type="submit" style="margin-bottom:10px">Find Address</button>
<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue" align="top" type="submit">Change</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/a3xnqy33/
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-4 control-label">Postcode</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="concept" name="concept">
<div class="input-group-btn inup-group-addon">
<button class="btn btn-default">Find Address</button>
<button class="btn btn-default" name="Continue" id="Continue" align="top" type="submit">Change</button>
</div>
</div>
</div>
</div>
please see the modified fiddle
Hey You can check the following also. In your code you have not closed your divs properly.
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-3 control-label">Postcode</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="concept" name="concept">
</div>
<div class="col-sm-4">
<div class="input-group-btn">
<button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Find Address</button>
<button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Change</button>
</div>
</div>
</div>
</div>
</div>
</div>