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.
Related
Consider the following Angular HTML template section:
<div class="row" [formGroup]="saveForm">
<label for="sections" class="col-md-3 col-form-label">Sections:</label>
<div class="col-md-9">
<a class="add-link" (click)="addSection()">Add Section</a>
<div class="mt-2 mb-2" formArrayName="sections">
<div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
<div class="row mb-2">
<div class="col-md-3">
<label for="from">From:</label>
</div>
<div class="col-md-2">
<input class="form-control" type="text" formControlName="from">
</div>
<div class="col-md-2">
<label for="to">To:</label>
</div>
<div class="col-md-2 mb-2">
<input class="form-control" type="text" formControlName="to">
</div>
<div class="col-md-1 custom-icon">
<i class="fas fa-minus-circle fa-lg clickable" (click)="deleteRow(i)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
This renders like so:
Now if I go to the mobile view in the browser it looks like this:
Both inputs will be limited to no more than 4 digits so I do not need them to be that large. Ideally I would like to have the two labels with their inputs on the same line with the delete icon below them (To be honest I'm not sure what to do with it UX wise). If that is not possible at least to have each label with its input on the same line.
I think something like the following would be best:
How can I accomplish this without breaking the full desktop view?
I am using Bootstrap 4.3.1
Thank you.
This is what you need for under the md sized devices:
divide the rows into col-4 for label
divide the rows into col-6 for input (or smaller)
style the icon via position:absolute to be on the right
Working snippet below:
#media screen AND (max-width:768px) {
.custom-icon {
position: absolute;
right: 20px;
top: -10px
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='container-fluid'>
<div class="row" [formGroup]="saveForm">
<label for="sections" class="col-md-3 col-form-label">Sections:</label>
<div class="col-md-9">
<a class="add-link" (click)="addSection()">Add Section</a>
<div class="mt-2 mb-2" formArrayName="sections">
<div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
<div class="row mb-2">
<div class="col-4 col-md-3">
<label for="from">From:</label>
</div>
<div class="col-6 col-md-2">
<input class="form-control" type="text" formControlName="from">
</div>
<div class="col-4 col-md-2">
<label for="to">To:</label>
</div>
<div class="col-6 col-md-2 mb-2">
<input class="form-control" type="text" formControlName="to">
</div>
<div class="col-1 col-md-1 custom-icon">
<i class="fa fa-minus-circle fa-lg clickable" (click)="deleteRow(i)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
you can achieve this without any custom stylesheet. its all about bootstrap classes.
I just wrapped inputs and labels in separate div and remove icon in separate div.
Please have a look at the below snippet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<div class="row" [formGroup]="saveForm">
<label for="sections" class="col-md-3 col-form-label">Sections:</label>
<div class="col-md-9">
<a class="add-link" (click)="addSection()">Add Section</a>
<div class="mt-2 mb-2" formArrayName="sections">
<div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
<div class="row mb-2 mb-sm-0">
<div class="col-10">
<div class="row">
<div class="col-6 col-sm-3 mb-2 mb-sm-0">
<label for="from">From:</label>
</div>
<div class="col-6 col-sm-3 mb-2 mb-sm-0">
<input class="form-control" type="text" formControlName="from">
</div>
<div class="col-6 col-sm-3">
<label for="to">To:</label>
</div>
<div class="col-6 col-sm-3">
<input class="form-control" type="text" formControlName="to">
</div>
</div>
</div>
<div class="col-2 d-flex align-items-center">
<div class=" custom-icon">
<i class="fas fa-minus-circle fa-lg clickable text-danger" (click)="deleteRow(i)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have a dashboard with a side-menu that I want to be fixed to the left. I tried doing a fixed position in css, but then all the divs get distorted and moved out of place. I then tried using bootstrap sticky-left, and it simply didn't work. I want for the left menu to stay fixed while the charts being scrollable.
CODE:
<div class="row head">
<div class="col-sm-2 sticky-left" id="side-bar">
<div id="side-nav">
<!--GREETING-->
<div class="row greeting">
<div class="col-sm-3" style="font-size: 2.6rem;">
<i class="far fa-user"></i>
</div>
<div class="col-sm-9">
<p>Hi Olivia!<br>School of UFeis</p>
</div>
</div>
<!--LABEL-->
<div class="row label">
<div class="col-sm-12">
<p>Menu</p>
</div>
</div>
<ul id="side-menu">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-desktop"></i>
</div>
<div class="col-sm-8">
Dashboard
</div>
</div>
</button>
<!---CHARTS BY YEAR--->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
</div>
<div class="col-sm-8">
Year
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=1>2019</button></li>
<li><button id=2>2018</button></li>
<li><button id=3>2017</button></li>
</ul>
</li>
<!-- CHARTS BY TEACHER -->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="col-sm-8">
Teacher
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=12>Ms. Lee</button></li>
<li><button id=13>Mr. Rogers</button></li>
<li><button id=6>Mr. Yang</button></li>
<li><button id=7>Ms. Mary</button></li>
</ul>
</li>
</ul>
</div>
</div>
<!---CHARTS-->
<div class="col-sm-10 chart_container">
<div class="row rankings">
<div class="col-sm-12">
<div class="row _chart">
<div id="lvl_chart">Please enter at least 3 markcards to see this chart.
</div>
</div>
</div>
</div>
<!--RECALLED CHART-->
<div class="row recalled">
<div class="col-sm-11 container-fluid topChart">
<div class="row _chart" >
<div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
</div>
<!--AGE CHART-->
<div class="row">
<div class="col-sm-11 bottomCharts">
<div class="row">
<div class="col-sm-6 age_chart">
<div class="row _chart">
<div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
<!--GENDER CHART-->
<div class="col-sm-6 gender_chart">
<div class="row _chart">
<div id="donut_chart" >
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope you are looking for sticky-top sidebar.
.chart_container {
height: 500vh
}
ul {
list-style: none;
padding: 0
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row head">
<div class="col-sm-3 " id="side-bar">
<div id="side-nav" class="sticky-top text-center">
<!--GREETING-->
<div class="row greeting">
<div class="col-sm-3" style="font-size: 2.6rem;">
<i class="far fa-user"></i>
</div>
<div class="col-sm-9">
<p>Hi Olivia!<br>School of UFeis</p>
</div>
</div>
<!--LABEL-->
<div class="row label">
<div class="col-sm-12">
<p>Menu</p>
</div>
</div>
<ul id="side-menu">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-desktop"></i>
</div>
<div class="col-sm-8">
Dashboard
</div>
</div>
</button>
<!---CHARTS BY YEAR--->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
</div>
<div class="col-sm-8">
Year
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=1>2019</button></li>
<li><button id=2>2018</button></li>
<li><button id=3>2017</button></li>
</ul>
</li>
<!-- CHARTS BY TEACHER -->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="col-sm-8">
Teacher
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=12>Ms. Lee</button></li>
<li><button id=13>Mr. Rogers</button></li>
<li><button id=6>Mr. Yang</button></li>
<li><button id=7>Ms. Mary</button></li>
</ul>
</li>
</ul>
</div>
</div>
<!---CHARTS-->
<div class="col-sm-9 chart_container">
<div class="row rankings">
<div class="col-sm-12">
<div class="row _chart">
<div id="lvl_chart">Please enter at least 3 markcards to see this chart.
</div>
</div>
</div>
</div>
<!--RECALLED CHART-->
<div class="row recalled">
<div class="col-sm-11 container-fluid topChart">
<div class="row _chart">
<div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
</div>
<!--AGE CHART-->
<div class="row">
<div class="col-sm-11 bottomCharts">
<div class="row">
<div class="col-sm-6 age_chart">
<div class="row _chart">
<div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
<!--GENDER CHART-->
<div class="col-sm-6 gender_chart">
<div class="row _chart">
<div id="donut_chart">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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;
}
I have two simple dropdown menus with Bootstrap v3. I want it so that they are displayed side by side with a width and utilizing the grid.
But it seems that the width stays the same. HEre is what I mean:
.menuList > div.dropdownInline {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="menuList">
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
<hr />
<h1>Without inline... </h1>
<div class="menuList">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
Do you see how without inline... the dropdown stretches fine into a nice width but ... with it.. (top menus)... it becomes squished? And one doesn't even show the blue panel.
What am I doing wrong?
you can just set width of menu
.dropdown-menu{
width:400px;//or whatever you want
}
check this out
Plunker
.dropdowm-menu is as small as it's content
so you can just fix it like above or set width of it's children element.
.menuList > div.dropdownInline {
display: inline-block;
}
.dropdown button{ margin-top:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="menuList">
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
<hr />
<h1>Without inline... </h1>
<div class="menuList">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
Just add it
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">