Im having some problems with layout of bootstrap.
I have looked at the link below to find some details about the situation.
How can I get a Bootstrap column to span multiple rows?
However, i couldnt figure out how to fix this issue:
----------What i have----------
Picture current
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- First row, directions -->
<div class="row top-buffer">
<div class="col-md-12">
<br><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-2">
<a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
<br>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
<div class="col-md-1">
</div>
<div class="row">
<div class="col-md-4">
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<br>
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-1"></div>
<div class="col-md-4">
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
</div>
<div class="col-md-1">
</div>
</div>
</div>
</body>
</html>
----------What i want----------
picture wanted
*Note, the extended box (left) should fill the entire row
You cannot span rows or columns as if them were tabe's. You should change your markup a little
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.row { border: 1px solid #f00;}
[class*="col-"] { border: 1px solid #0f0; }
</style>
<div class="container">
<div class="row top-buffer">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-2">
<a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
<br>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-4">
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<br>
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search">
</div>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
</div>
</div>
I changed the columns from md to xs just to prevent them from going responsive inside the snippet frame.
Related
I want to keep text box and button in the same line, but it's coming in two different lines:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-6">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
Make your parent element, containing the input and button element a flex box. I used the bootstrap utility classes to achieve this. I added a small margin to the input element as well, also using a bootstrap utility class.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-12 d-flex">
<input class="form-control mr-1" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
Probably the best way to achieve exactly what you want is something like this
<div class="container">
<div class="row">
<div class="col-sm-8">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<form asp-controller="Expense" asp-action="Index" class="form-group col-sm-4 d-flex">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</form>
</div>
</div>
The "Filter" button goes in the second line since Bootstrap's form-control class has display: block and width: 100%. Change display: inline-block and reduce width: 50%.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-8">
<input class="form-control" type="text" name="SearchString" placeholder="Search" style="display: inline-block; width: 50%;">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-8">
<div class="d-flex">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info ml-2">Filter</button>
</div>
</div>
</form>
</div>
</div>
I have the following login page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Log in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">
<img src="https://loremimage.com/default/32/32/1" />
Διαχείρηση Μελών ΕΛΛΑΚ Κύπρου
</a>
</nav>
</header>
<div class="container-fluid d-flex align-items-center justify-content-center">
<div class="row bg-light border border-primary">
<div class="col mt-5 col-xs-12 col-md-12 col-lg-12">
<h1 style="text-align:center">Log in</h1>
<form action="/login_check" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="_username" value="" placeholder="Username" required="required" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="_password" placeholder="Password" required="required" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input" />
<label class="form-check-label" for="remember_me" >Remember me</label>
</div>
</div>
<div class="form-row">
<div class="col">
<input type="submit" class="btn btn-primary btn-block" id="_submit" name="_submit" value="Log in" />
</div>
<div class="col">
<a class="btn btn-warning btn-block" href="/resetting/request">I forgot my password</a>
</div>
</div>
</form>
</div>
<div class="col col-xs-12 col-md-12 col-lg-12 mt-1 mb-5">
<a class="btn btn-primary btn-block" href="/register/">I do not have an account</a>
</div>
</div>
</div>
</body>
</html>
And my problem is that the login form is not too center as I want to as this image shows.
What I want to do is to display like that:
So do you know how to move the whole login form towards the center I tried the bootstrap's d-flex align-items-center justify-content-center class combination and somehow it does center but the flexbox is as height as my login form.
So my guess is on how I can make the flexbox take over the whole remaining height. DO you know how to do that?
You should give height to your container-fluid div in view-port
height: calc(100vh - 60px);
60px is your header height (View in full-screen mode of snippet)
.custom {
height: calc(100vh - 60px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Log in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">
<img src="https://loremimage.com/default/32/32/1" />
Διαχείρηση Μελών ΕΛΛΑΚ Κύπρου
</a>
</nav>
</header>
<div class="custom container-fluid d-flex align-items-center justify-content-center">
<div class="row bg-light border border-primary">
<div class="col mt-5 col-xs-12 col-md-12 col-lg-12">
<h1 style="text-align:center">Log in</h1>
<form action="/login_check" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="_username" value="" placeholder="Username" required="required" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="_password" placeholder="Password" required="required" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input" />
<label class="form-check-label" for="remember_me" >Remember me</label>
</div>
</div>
<div class="form-row">
<div class="col">
<input type="submit" class="btn btn-primary btn-block" id="_submit" name="_submit" value="Log in" />
</div>
<div class="col">
<a class="btn btn-warning btn-block" href="/resetting/request">I forgot my password</a>
</div>
</div>
</form>
</div>
<div class="col col-xs-12 col-md-12 col-lg-12 mt-1 mb-5">
<a class="btn btn-primary btn-block" href="/register/">I do not have an account</a>
</div>
</div>
</div>
</body>
</html>
I'm trying to make a modal window open up when I press a link in my Navbar. I've tried to copy and paste some example code and adjust it a bit but nothing happens when I press the link. What am I missing? I'm still learning Bootstrap so bear with me :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cool Website</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/enabletooltips.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/index-styling.css">
</head>
<body>
<div class="sticky-header-navbar-container">
<div class="well">
<div class="navbar navbar-default navbar-fixed-top" id="navbar">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
<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-header">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<span>Login</span>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">
Remember Me
</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
</form>
</li>
<li style="padding-right: 20px">
<a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Upload, Comment and Rate!">Not Registered? Click Here!</a>
</li>
</ul>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some Text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="header-container">
<div class="container" style="padding-top: 25px">
<div class="jumbotron jumbotronic">
<h1 class="h1">Cool Website</h1>
<p>Catchphrase!</p>
</div>
</div>
</div>
<div class="search-bar-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Search Here</div>
<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 class="categories-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Or Click One of these</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-success btn-bg" id="category-gameplay-btn">Button 1</button>
</div>
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-warning btn-bg" id="category-editor-btn">Button 2</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger btn-bg" id="category-engine-btn">Button 3</button>
</div>
</div>
</div>
</div>
<div class="footer-container">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container" style="text-align: center">
<span>This website was made using the following tools</span>
<br>
<span>
Bootstrap | glyphicons
</span>
</div>
</div>
</div>
</body>
</html>
EDIT: Full Code Put up
Working good, You have to include bootstraps.min.js
like this :
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/enabletooltips.js"></script>
More it's better to put script a the end of the page.
How can I get these two divs to align in a row horizontally and keep the form-group intact?
No matter what kind of col-ms-sizing I do the two input groups will not align on the same line and I believe this is only happening because of the form-group class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-sm-5 input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-sm-5 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure you wrap your inputs with a <div class="row"> and then make separate divs for the col-sm-* classes. I replaced col-sm-* with col-xs-* to ensure the snippet would not wrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<div class="row">
<div class="col-xs-1">
<label for="inputPrice" class="control-label">Price</label>
</div>
<div class="col-xs-5">
<div class="input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-xs-1">
<label for="inputDate" class="control-label">Date</label>
</div>
<div class="col-xs-5">
<div class="input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
You just have to wrap your inputs inside of col elements basically just nested columns. Make sure you are also using the correct sized columns for the correct screen sizes.
http://jsfiddle.net/kwd9cqn9/1/
<div class="container">
<div class="container-fluid">
<form class="form-horizontal">
<div class="form-group">
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-lg-12 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice" />
<span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date" />
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today</li>
<li>Tomorrow</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
I have a panle body that including an image and button under it.
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden">
</div>
<div class="col-md-6">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden">
</div>
</div>
</div>
I could not set alignment of button and image. Button should be under image and center. I could create a temporary solution with custom css but I want to learn is there a solution with bootstrap.
Since the labels are of inline display in nature, the class text-center does the trick for you!
<div class="panel-body">
<div class="row">
<div class="col-md-6 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden">
</div>
<div class="col-md-6 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden">
</div>
</div>
Preview
Fiddle: http://www.bootply.com/QwYES83I3B
Try this:
DEMO
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="col-md-12 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio" />
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden" />
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio" />
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden" />
</div>
</div>
</div>
</div>