I'm working on my first Bootstrap layout and so far enjoying it, although I have ran into some issue where it seems to be creating unexpected padding and alignment issues.
I want to have it laid out horizontally as Nav Bar, Search Bar, Content, Footer. They should all be full width of the page, but all content is kept in the middle and aligned. For some reason, my Nav Bar/Footer have weird spaces on either side and the content alignment tends to be jagged.
Can anyone help me figure out what is causing these problems?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
<!-- Right Contents -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li><span class="glyphicon glyphicon-user"></span> Register</li>
</ul>
</div>
</nav>
<!-- Search Bar -->
<div class="row search-bar">
<div class="container">
<!-- Search Text Box -->
<div class="col-lg-5">
<input class="form-control" id="search" type="text" value="Search stuff...">
</div>
<!-- Search Category -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Location -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Button -->
<div class="col-lg-1">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="content col-lg-12">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<div class="container">
<p>© Company 2016</p>
</div>
</footer>
</div>
</body>
</html>
You have not structured your HTML properly. Always rule of thumb is all your columns must be inside a row and row inside a container. You can imagine it as
container > row > columns
Also I added a btn-block on the last button so it spreads out a bit. Another thing to not is you have used multiple containers in your HTML. Generally the rule of thumb is use one container in your page. However in your case as you have a menu that spreads throught the page and the body is centered, you will need 2 containers. The general boilerplate would be something as follows:
container
row // each row is 12 columns. so add the combination
col 4
col 8
row
col 3
col 3 // you can further divide each columns into a row
row // again divided into 12 columns
col 6
col 6
col 3
col 3
Container: wraps everything and centers its contents
Container Fluid: wraps everything but lets it flow
Row: Container to define columns. Bootstrap uses 12 column grid
Column: Each columns
Bootstrap website has a good example of how grids work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
<!-- Right Contents -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li><span class="glyphicon glyphicon-user"></span> Register</li>
</ul>
</div>
</nav>
</div>
<!-- Search Bar -->
<div class="container">
<div class="row search-bar" style="margin-bottom: 10px;">
<!-- Search Text Box -->
<div class="col-lg-5">
<input class="form-control" id="search" type="text" value="Search stuff...">
</div>
<!-- Search Category -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Location -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Button -->
<div class="col-lg-1">
<button class="btn btn-default btn-block" type="button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
<div class="row">
<div class="content col-lg-12">
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<div class="container">
<p>© Company 2016</p>
</div>
</footer>
</body>
</html>
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
Bootstrap
Your padding and alignment issue fixed its happening because of improper bootstrap structure. see the code here CODEPEN
<div class="container-fluid">
<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
<!-- Right Contents -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li><span class="glyphicon glyphicon-user"></span> Register</li>
</ul>
</div>
</nav>
<!-- Search Bar -->
<div class="container ">
<div class="row search-bar" style="margin-bottom:10px;">
<!-- Search Text Box -->
<div class="col-lg-5">
<input class="form-control" id="search" type="text" value="Search stuff...">
</div>
<!-- Search Category -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Location -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Button -->
<div class="col-lg-1">
<button class="btn btn-default btn-block" type="button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="content col-lg-12">
<div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<div class="container">
<p>© Company 2016</p>
</div>
</footer>
</div>
CSS
.no-margin{
margin: 0px;
}
.no-padding
{
padding: 0px;
}
HTML
<div class="panel-group" no-margin no-padding>
<div class="panel-primary" style="box-shadow:0px 20px 20px 0px">
<div class="panel-body">
ANYWHERE IN ANY DIV CLASS
<nav class="navbar navbar-background navbar-info no-margin no-padding" >
<div class="navbar-header ">
<ul class="nav navbar-nav">
There is already a Bootstrap tweak class for that common problem since always...
gutters or no-gutters
.no-gutters {
margin-right: 0;
margin-left: 0;
}
Related
I have a two-column layout with one element on the left and two on the right.
How can I keep the last element inside the right column aligned relatively to the bottom of the left column?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bare - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<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>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-7">
<div class="card card-block">
<h3>Column 1</h3>
<br />
<br />
<br />
<p>..end of content</p>
</div>
</div>
<div class="col-5">
<div class="row no-gutters">
<div class="col-12">
<div class="card card-block">
<h3>Column 2</h3>
</div>
</div>
<div class="col-12 align-self-end">
<div class="card card-block">
<h3>Column 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<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>
Thank you for your help!
By adding the .align-items-end to the parent row, it vertically aligns the columns to bottom of it.
If you want to have the column number 3 on the top but preserve the current position of column 4, I would suggest for you to take a look in to a jQuery library called eqHeight. This would allow you to stretch the parent columns (col-7 and col-5) to same height, after which the column number 3 should be on top with column 1.
<!-- Page Content -->
<div class="container-fluid">
<div class="row align-items-end">
<div class="col-7">
1<br>
<br>
<br>
2
</div>
<div class="col-5">
<div class="col-12">
3
</div>
<div class="col-12 align-self-end">
4
</div>
</div>
</div>
</div>
Why not use different row for 1 - 3 and 2 - 4.
Because you have using bootstrap grid system.
7 col - 5 col
-------------
Bootstrap two column layout
Kindly add style in fourth column div.
style="position: absolute;bottom: 0px;"
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-7">
1 <br />
<br />
<br />
<br />
2
</div>
<div class="col-5">
<div class="row no-gutters">
<div class="col-12 align-self-end">
3
</div>
</div>
<div class="row no-gutters" >
<div class="col-12 align-self-end" style="position: absolute;
bottom: 0px; ">
4
</div>
</div>
</div>
</div>
</div>
This could be what you are looking for:
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
3
</div>
</div>
<div class="row">
<div class="col-md-6">
2
</div>
<div class="col-md-6">
4
</div>
</div>
OR
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
2
</div>
<div class="col-md-12">
3
</div>
</div>
</div>
</div>
<div class="col-5">
<row class="no-gutters">
<div class="col-lg-12">
3
</div>
<div class="col-lg-12">
4
</div>
</row>
</div>
It will take full width in any screen size.
I have a issue with tabs on Bootstrap:
I coded a page that's is suppose to be full width/height and the navbar would be the tabs.
I don't know why when I click on any tab button, It brings me a weird transition that isn't supposed to be there.
I just need a static tab menu, out off any transitions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="navarea transition-width">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
LOGO
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse" data-toggle="collapse" data-target="#navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 1</h1>
</div>
<div class="tab-pane" id="tab2">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 2</h1>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="tab-content text-center">
<br>
<br>
<br>
<h1>TAB 3</h1>
</div>
</div>
<div class="tab-pane" id="tab4">
<br>
<br>
<br>
<h1>TAB 4</h1>
</div>
<div class="tab-pane" id="tab5">
<br>
<br>
<br>
<h1>TAB 5</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Is better if you check out the snippet by full screen;
There's a lot of fluff in here that you probably don't need, but I removed one of the
data-target="#navbarCollapse"
and it stopped animating
Found this example on w3schools that you could probably check out as well:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="navarea transition-width">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
LOGO
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse" data-toggle="collapse">
<ul class="nav navbar-nav">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 1</h1>
</div>
<div class="tab-pane" id="tab2">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 2</h1>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="tab-content text-center">
<br>
<br>
<br>
<h1>TAB 3</h1>
</div>
</div>
<div class="tab-pane" id="tab4">
<br>
<br>
<br>
<h1>TAB 4</h1>
</div>
<div class="tab-pane" id="tab5">
<br>
<br>
<br>
<h1>TAB 5</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I am trying to create HTML/CSS with the image below [![enter image description here][1]][1]
I am having trouble creating the silver "Add corkscrew" box with a white box below it and then finally another silver box within it. Any ideas how I can do that?
This is my code below but it looks nothing like the above image:
{% extends 'bootstrap/base.html' %}
{% block content %}
<div class="container">
<div class="row row-content">
<div class="col-xs-12 col-sm-6 text-right">
<div class="row">
<h2><font color="black">CorkBoard</font></h2>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
<!-- Email -->
<div class="form-group">
<label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
</div>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Home & Garden</li>
<li>Education</li>
<li>People</li>
<li>Separated link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
</body>
</html>
This may help get you going.
Highly suggest moving the inline styles to their own classes regardless of sample.
Thought not my preferred way, this is the bootstrap mostly way.
I did change container to container-fluid on all of them, seems to also fix another issue I noticed with responsive
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color:silver">
<div>
<h6>Add CorkBoard</h6>
</div>
<div class="container-fluid" style="background-color:white">
<div class="row row-content">
<div class="col-xs-12">
<br />
<div class="container-fluid" style="background-color:silver">
<div class="row row-content">
<div class="col-xs-12 col-sm-6 text-right">
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<h2>
<font color="black">CorkBoard</font>
</h2>
</div>
</div>
</div>
<div class="row row-content" style="padding:15px">
<div class="col-xs-12 col-sm-6">
<form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
<!-- Email -->
<div class="form-group">
<label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
</div>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Home & Garden</li>
<li>Education</li>
<li>People</li>
<li>Separated link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-content">
<p></p>
</div>
</div>
<div class="row row-content">
<p></p>
</div>
</div>
</body>
</html>
However with a little bit of custom CSS you can achieve something slightly nicer, and improve on it and/or change it per your liking much easier.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css" media="all">
.box {
background-color: silver;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.boxinabox {
background-color: white;
width: 100%;
padding: 2.5%;
}
</style>
</head>
<body>
<div class="container-fluid box">
<h6>Add CorkBoard</h6>
<div class="boxinabox">
<div class="container-fluid" style="background-color:silver">
<div class="row row-content">
<div class="col-xs-12 col-sm-6 text-right">
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<h2>
<font color="black">CorkBoard</font>
</h2>
</div>
</div>
</div>
<div class="row row-content" style="padding:15px">
<div class="col-xs-12 col-sm-6">
<form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
<!-- Email -->
<div class="form-group">
<label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
</div>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Home & Garden</li>
<li>Education</li>
<li>People</li>
<li>Separated link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm unsure if this is what you were asking about, sorry if I've gone off-topic. Please let me know if I did.
Rows can only contain columns, but you have the following:
<div class="row">
<h2><font color="black">CorkBoard</font></h2>
</div>
You need to add a column in the row, something what like you did below that:
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<h2><font color="black">CorkBoard</font></h2>
</div>
</div>
You also need to wrap your dropdown class in rows and cols too.
I am using bootstrap in Angular 2 project and I want to freeze couple of divs(with ids as filters and categories in the code) on top always, while user scrolls down the page.
This is the code that I have in jsfiddle here
Code Snippet:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="/overview">Overview</a></li>
<li routerLinkActive="active"><a routerLink="/insights">Insights</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div id="filters" class="container-fluid" style="margin-top: 60px" >
<div class="row">
<div class="col-md-2 col-sm-4">
<button>Filter 1</button>
</div>
<div class="col-md-2 col-sm-4">
<button>Filter 2</button>
</div>
</div>
</div>
<div id="categories" class="container-fluid" >
<div class="row">
<ul class="nav navbar-nav">
<li><a routerLink="#">Sub Category 1</a></li>
<li><a routerLink="#">Sub Category 2</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: blue; height: 800px;">
Trend Chart
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: green; height: 800px;">
Bar Chart
</div>
</div>
</div>
</div>
I have tried using bootstrap's 'affix', but it is breaking the scroll and the margins of 'filters' and 'categories' divs, as can be seen here
Kindly let me know if I am missing anything else that needs to be added for affix to work.
To achieve your goal you need to use position: fixed and z-index: 1030 CSS with your div
Here's the jsfiddle
Use this CSS in your div
<div id="filters" class="container-fluid"
style="margin-top: 60px; position: fixed; z-index: 1030;">
<div class="row">
<div class="col-md-2 col-sm-4">
<button>Filter 1</button>
</div>
<div class="col-md-2 col-sm-4">
<button>Filter 2</button>
</div>
</div>
</div>
Use the style attribute "position:fixed" in both the div you want to be fixed.
Also set z-index value above 100. (this is to show the fixed div over all other div while scrolling).
Example:
<div id="filters" class="container-fluid" style="margin-top: 60px;position:fixed;z-index:999;" >
<div class="row">
<div class="col-md-2 col-sm-4">
<button>Filter 1</button>
</div>
<div class="col-md-2 col-sm-4">
<button>Filter 2</button>
</div>
</div>
</div>
<div id="categories" class="container-fluid" style="position:fixed;z-index:999;" >
<div class="row">
<ul class="nav navbar-nav">
<li><a routerLink="#">Sub Category 1</a></li>
<li><a routerLink="#">Sub Category 2</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: blue; height: 800px;">
Trend Chart
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: green; height: 800px;">
Bar Chart
</div>
</div>
</div>
</div>
I have a carousel in container-fluid. I am trying to decrease the height of the carousel but I am not able to do so. I tried style it dont work as well. Currently, the carousel takes up the width and height of the whole web page.
How can I go about doing it?
Below is my code:
CSS
header {
background: #f16251;
color:#000000;
}
header h1,header h2,header h3 a,header a,header a:hover {
color:#101010;
font-weight:800;
text-decoration:none;
}
header h3 {
font-family: 'Kreon', serif;
background: #ffcc33;
padding:10px;
border-radius:3px;
font-size:34px;
padding:12px 10px 6px 10px;
}
header .dropdown-menu {
top:74px;
background: #ffcc33;
border-width:0;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<header class="masterhead">
<!-- <div class="container">-->
<div class="container-fluid">
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- item 1 -->
<div class="item active">
<img src="img/Nielsen.png" alt="">
<div class="carousel-caption">
<h4>Testing </h4>
<p>Testing Testing</p>
</br>
</div>
</div>
<!-- item 2 -->
<div class="item">
<img src="img/UIParade.png" alt="">
<div class="carousel-caption">
<h4>Testing Image 2</h4>
<p>Testing Testing</p>
</br>
<a class="btn btn-primary" target="_blank" href="http://www.uiparade.com/">Learn
more</a>
</div>
</div>
</div>
</div>
</div>
<!--<div class="col-sm-6">
<h1>Evon Chong
<p class="lead">{A Bootstrap Template}</p></h1>
</div>-->
<!--<div class="col-sm-6">
<div class="pull-right hidden-xs">
<h3><i class="glyphicon glyphicon-cog"></i></h3>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-chevron-right"></i> Link
</li>
<li><i class="glyphicon glyphicon-user"></i> Link
</li>
<li><i class="glyphicon glyphicon-lock"></i> Link
</li>
<li><i class="glyphicon glyphicon-cog"></i> Link
</li>
</ul>
</div>
</div>-->
</div>
</div>
<!--</header>-->
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li>Home
</li>
<li>About
</li>
<li>My Skills
</li>
<li class="active"><strong>Education</strong>
</li>
<li>Portfolio
</li>
<li>Contact
</li>
<!--<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>-->
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
<!-- Begin page content -->
<div class="divider" id="section1"></div>
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<div class="page-header text-center">
<h1>Sticky Footer with Fly-in Navbar</h1>
</div>
<p class="lead text-center">
Twitter Bootstrap is a front-end toolkit to rapidly build web applications.
</p>
<p class="text-center">
Bootstrap is a framework that uses some of the latest browser techniques to provide you with stylish typography, navigation, buttons, tables, etc. One of the primary changes in Bootstrap 3 is an emphasis on Mobile-First responsive design. The goal is to elevate the mobile experience to a first-class citizen of the design process, because several billion mobile users is quite a large market to tap into. So, sites built with the current Bootstrap version target mobile devices and scale for larger screens depending on screen size.
</p>
</div>
</div>
<div class="divider" id="section2"></div>
<section class="bg-1">
<div class="col-sm-6 col-sm-offset-3 text-center">
<h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Try and Tweak Different Layouts</h2>
</div>
</section>
<div class="divider"></div>
<div class="container" id="section3">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h1>Mobile-first + Responsive</h1>
<p>
Instead of creating a unique version of the webpage for each desktop, mobile & tablet, you can now create one design that works on all devices, browsers & resolutions. Your designs will be future ready when a new table or phone size comes in the market, your designs will adapt itself and fit to the new screen size.
</p>
<hr>
<img src="/assets/example/bg_smartphones.jpg" class="img-responsive">
<hr>
</div>
<!--/col-->
</div>
<!--/container-->
<div class="divider"></div>
<section class="bg-3" id="section4">
<div class="col-sm-6 col-sm-offset-3 text-center">
<h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Leverage Snippets & Examples</h2>
</div>
</section>
<div class="continer bg-4">
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div>
<img src="//placehold.it/450X250/565656/eee" class="img-responsive">
</div>
<div class="panel-body">
<p class="lead">Hacker News</p>
<p>120k Followers, 900 Posts</p>
<p>
<img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
</p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="//placehold.it/450X250/ffcc33/444" class="img-responsive">
</div>
<div class="panel-body">
<p class="lead">Bootstrap Templates</p>
<p>902 Followers, 88 Posts</p>
<p>
<img src="https://lh5.googleusercontent.com/-AQznZjgfM3E/AAAAAAAAAAI/AAAAAAAAABA/WEPOnkQS_20/s28-c-k-no/photo.jpg" width="28px" height="28px">
</p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="//placehold.it/450X250/f16251/444" class="img-responsive">
</div>
<div class="panel-body">
<p class="lead">Social Media</p>
<p>19k Followers, 789 Posts</p>
<p>
<img src="https://lh4.googleusercontent.com/-eSs1F2O7N1A/AAAAAAAAAAI/AAAAAAAAAAA/caHwQFv2RqI/s28-c-k-no/photo.jpg" width="28px" height="28px">
<img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
</p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
</div>
<!--/row-->
</div>
<!--/container-->
<div class="divider" id="section5"></div>
<div class="row">
<h1 class="text-center">Where In The World?</h1>
<div id="map-canvas"></div>
<hr>
<div class="col-sm-8">
<div class="row form-group">
<div class="col-xs-3">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="middleName" name="firstName" placeholder="Middle Name" required="">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-5">
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>
<div class="col-xs-5">
<input type="email" class="form-control" name="phone" placeholder="Phone" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-10">
<input type="homepage" class="form-control" placeholder="Website URL" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-10">
<button class="btn btn-default pull-right">Contact Us</button>
</div>
</div>
</div>
<div class="col-sm-3 pull-right">
<address>
<strong>Iatek, LLC.</strong><br>
795 Folsom Ave, Suite 600<br>
Newport, RI 94107<br>
P: (123) 456-7890
</address>
<address>
<strong>Email Us</strong><br>
first.last#example.com
</address>
</div>
</div>
<!--/row-->
<div class="container">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h2>Beautiful Bootstrap Templates</h2>
<hr>
<h4>
We love templates. We love Bootstrap.
</h4>
<p>Get more free templates like this at the Bootstrap Playground, Bootply.</p>
<hr>
<ul class="list-inline center-block">
<li>
<a href="http://facebook.com/bootply">
<img src="/assets/example/soc_fb.png">
</a>
</li>
<li>
<a href="http://twitter.com/bootply">
<img src="/assets/example/soc_tw.png">
</a>
</li>
<li>
<a href="http://google.com/+bootply">
<img src="/assets/example/soc_gplus.png">
</a>
</li>
<li>
<a href="http://pinterest.com/in1">
<img src="/assets/example/soc_pin.png">
</a>
</li>
</ul>
</div>
<!--/col-->
</div>
<!--/container-->
</div>
<!--/wrap-->
<div id="footer">
<div class="container">
<p class="text-muted">This Bootstrap Example courtesy Bootply.com
</p>
</div>
</div>
<ul class="nav pull-right scroll-top">
<li><i class="glyphicon glyphicon-chevron-up"></i>
</li>
</ul>
<!-- JavaScript placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Try this:
style="height:500px" in the carousel tag
HTML:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:500px">