I'm developing a web-audio player, and I'm new to Bootstrap. At the moment, my player looks like this:
This is my source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wavesurfer - Intro</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="container-fluid">
<!-- Waveform -->
<div id="waveform"></div>
<!-- Progress -->
<div class="row">
<div id="progress" class="col-md-6">Loading audio...</div>
<div id="duration" class="col-md-6" style="text-align: right;"></div>
</div>
<br>
<div class="row">
<!-- Backward 5 s -->
<button id="bwd" class="col-md-3" type="button" disabled="disabled">
<i class="fa fa-backward"></i>
<div>Backward 5 s</div>
</button>
<!-- Play/Pause -->
<button id="btn-play-pause" class="btn btn-primary col-md-4" type="button" disabled="disabled">
<i id="icon-play-pause" class="fa fa-play"></i>
<div id="text-play-pause">Play</div>
</button>
<!-- Forward 5 s -->
<button id="fwd" class="col-md-3" type="button" disabled="disabled">
<i class="fa fa-forward"></i>
<div>Forward 5 s</div>
</button>
<!-- Stop -->
<button id="btn-stop" class="col-md-2" type="button" value="Stop" disabled="disabled">
<i class="fa fa-stop"></i>
<div>Stop</div>
</button>
</div>
<br>
<div class="row">
<div class="col-md-6">
<!-- Audio rate -->
<i class="fas fa-tachometer-alt"></i>
<input id="audio-rate" type="range" min="0.25" max="2" value="1" step="0.25">
<div id="audio-rate_value" style="display: inline;">1x</div>
</div>
<div class="col-md-6" style="text-align: right;">
<!-- Volume -->
<i id="icon-volume" class="fas fa-volume-down"></i>
<input id="volume" type="range" min="0" max="2" value="1" step="0.1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- Loop -->
<button id="loop" class="btn btn-outline-primary">Loop</button>
</div>
<div class="col-md-6" style="text-align: right;">
<!-- Low-pass filter -->
<button id="lowpass-filter" class="btn btn-outline-primary">Low-pass filter</button>
</div>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
I've stumbled upon several issues.
The volume icon - It changes depending on the volume level, but in a "bad way":
How can I keep it fixed?
Shrinking the screen width - This is what happens when I shrink my window (I've drawn red rectangles to make the problem clearer):
How can I keep two elements inside the same row?
EDIT #1 - This is the code for changing the volume icon:
var controls = {
...
volume: document.getElementById("volume"),
...
}
controls.volume.addEventListener("input", function () {
let volume = controls.volume.value;
wavesurfer.setVolume(volume);
// Change volume icon
document.getElementById("icon-volume").classList = "";
if(volume == 0){
document.getElementById("icon-volume").classList = "fas fa-volume-off";
}
else if (volume > 0 && volume <= 1){
document.getElementById("icon-volume").classList = "fas fa-volume-down";
}
else{
document.getElementById("icon-volume").classList = "fas fa-volume-up";
}
});
I eventually managed to solve Issue #2 by adding the width attribute to the icon tag style:
<i id="icon-volume" class="fas fa-volume-down" style="text-align: justify; width: 18px;"></i>
Related
I'm trying to create a website using bootstrap where the title and the search bar is at the center of the screen. I tried adding the my-auto, but that doesn't do anything. It shouldn't be difficult, but I can't make it work. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container" style="margin-top: 8%;">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1>Movie</h1>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
<span class="input-group-btn">
<button type="button" class="btn btn-outline-primary">search</button>
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
</span>
</div>
</div>
</form>
</div>
</div>
<p>movie!</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can use display:flex; property to center the content.
.container{
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="container" style="margin-top: 8%;">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1>Movie</h1>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
<span class="input-group-btn">
<button type="button" class="btn btn-outline-primary">search</button>
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
</span>
</div>
</div>
</form>
</div>
</div>
<p>movie!</p>
</div>
What youre looking for is flex box,
Try adding to the <div class="row"> the style of
display: flex;
flex-direction: column;
align-items: center;
I'm trying to learn materialize CSS framework and I'm facing a little problem. It appears messy when I add a search input or when I add a grid system. I don't know why.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title></title>
</head>
<body>
<nav>
<div class="row">
<div class="col s12 l12">
<div class="nav-wrapper navbar-fixed">
<div class="row">
<div class="brand-logo left col s12 l4">
opplance
</div>
</div>
<div class="row">
<form class="col s6 l4 " method="GET">
<input type="search" name="" value="">
<button type="submit" name="button" class="btn"> <i class="material-icons">search</i>
</button>
</form>
</div>
<div class="row">
<ul class="right col s6 l4">
<li> <button type="button" name="button" class="btn">Register</button> </li>
<li><button type="button" name="button" class="btn">Login</button></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
which is used to listing book and when user clicks on "Edit" button need to show book details in model-fade form.
Am tried but new values are not showing in model.
var rootApp = angular.module('profileApp', ['bookList','EditBook']);
// menu bar items
var firstApp = angular.module('bookList', []);
firstApp.controller('bookListController',function($scope, $http,productService) {
//here am getting data from service
var obj1 = {Book_Title:"book1",Book_Category: "Comdedy"};
var obj2 = {Book_Title:"book2",Book_Category: "story"};
var totalArray=[];
totalArray.push(obj1);
totalArray.push(obj2);
$scope.UserBookList = totalArray;
//funcion call get from html directly
$scope.bookItemEditIndex = function(idx){
$("#EditBookModal").modal();
$scope.temp = $scope.UserBookList[idx];
productService.addProduct($scope.temp);
console.log( $scope.temp);
console.log( productService.getProducts()[0]);
}
});
//Edit book
var secondApp = angular.module('EditBook', []);
secondApp.controller('EditBookController', function($scope,productService) {
var products = productService.getProducts()[0];
console.log(products);
$scope.NGE_bookTitle = $scope.products;
});
rootApp.service('productService', function() {
var productList = [];
var addProduct = function(newObj) {
productList.push(newObj);
};
var getProducts = function(){
return productList;
};
return {
addProduct: addProduct,
getProducts: getProducts
};
});
<!DOCTYPE html>
<html lang="en" ng-app="profileApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<style type="text/css">
.navbar{
}
.modal-dialog {
width: 100%;
height: auto;
padding: 0;
margin:0;
}
#mid-containeer{
border: 1px #e4e4e4 solid;
height: 10%;
}
#footer-containeer{
height: 100px;
width:100%;
}
</style>
<script type="text/javascript" src="indexservice.js"></script>
</head>
<body>
<!-- user book list -->
<div class="container">
<h1 class="page-header">Book Details </h1>
<p>The table having your book deails</p>
<div ng-controller="bookListController" id="bookListControllerID">
<table class="table table-bordered table table-striped css-serial">
<thead>
<tr>
<th>Book Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody ng-repeat="book in UserBookList">
<tr>
<td> {{book.Book_Title}} </td>
<td><a class="btn mini blue-stripe btn-info" href="#" data-toggle="modal" data-target="" ng-click="bookItemEditIndex($index)">Edit</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- edit book module -->
<div class="modal fade " id="EditBookModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true" data-backdrop="true">
<div ng-controller="EditBookController" id="EditBookControllerID">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Book</h5>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="container" style="padding: 0px;">
<h1 class="page-header">Book Profile</h1>
<div class="row">
<!-- left column -->
<!-- edit form column -->
<div class="col-md-8 col-sm-6 col-xs-12 personal-info">
<div class="alert alert-info alert-dismissable">
<a class="panel-close close" data-dismiss="alert">×</a>
<i class="fa fa-coffee"></i>
You can edit your <strong>Book</strong> here.
</div>
<h3>Edit book info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">Book title:</label>
<div class="col-lg-8">
<input class="form-control" value="jahn" type="text" name="E_bookTitle" ng-model="NGE_bookTitle">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input class="btn btn-primary" value="Save" type="submit" >
<span></span>
<input class="btn btn-default" value="Cancel" type="reset">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
thanks advance.
I tried to make a popup window with bootstrap. I modified some codes from a template. It should have 3 columns. 1st column picture, 2nd column text and 3rd column is price and button+icon. This is going to be a list with several similar rows. Here I just put one row to make simple. The footer is going to be some text. The problem is I can't get the 3rd column to the right position. I tried with clearfix, etc. Any suggestions?
Please note that, these codes have several unsolved issue. Please ignore those things. That's not the first priority. Tks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wish List</h4>
</div>
<div class="modal-body">
<div class="col-lg-3 col-md-4 col-xs-4 ">
<a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div "col-lg-3 col-md-4 col-xs-4 clearfix">
<p >Product Title</p>
<p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small></p>
</div>
<div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
<p>price$6.99</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
<span class="glyphicon glyphicon-trash"></span>
</div>
</div>
<div class="modal-footer">
<span> view of 1-5 of </span>
<select>
<option value="5">5</option>
<option value="5">10</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
you have to add a 'row' , and forgot a 'class=' , and you can remove the clearfix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wish List</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-4 ">
<a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-4 clearfix">
<p >Product Title</p>
<p class="text-warning"><small>Description.dfdasf jsadfdasld fdslafjlsadf sldfjsdljf</small></p>
</div>
<div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
<p>price$6.99</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
<span class="glyphicon glyphicon-trash"></span>
</div>
</div>
</div>
<div class="modal-footer">
<span> view of 1-5 of </span>
<select>
<option value="5">5</option>
<option value="5">10</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Mainly it's number 1 below, but here are a couple other things to consider:
You left out the keyword class in the markup for the second column. This is pretty important.
You don't really need the clearfix class. If you wrap the whole thing in a row div then it will do the line breaking for you pretty well.
The columns should always add up to 12 - when you have three col-lg-3s you'll end up with something that is left-aligned and only takes up 3/4ths of the modal.
The columns for the smaller screen sizes will get bumped up to the next ones, so col-xs-4 col-sm-4 col-md-4 col-lg-3 is the same as saying col-xs-4 col-lg-3. The less CSS rules that need to be applied for the same result the better.
In your example you have a really long word in the description, which causes it to overflow into the next column. You might want to account for that situation by playing around with things like word-wrap and text-overflow.
$(document).ready(function() {
$("#myModal").modal('show');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wish List</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4">
<a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div class="col-xs-4">
<p>Product Title
</p>
<p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small>
</p>
</div>
<div class="col-xs-4">
<p>price$6.99</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
<span class="glyphicon glyphicon-trash"></span>
</div>
</div>
</div>
<div class="modal-footer">
<span> view of 1-5 of </span>
<select>
<option value="5">5</option>
<option value="5">10</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Can someone tell why my webpage's components are overlapped when the browser is resized? and How to fix it? I noticed that if I replace the aboutContainer and the bottomContainer with the two copies of the topContainer, the problem does not occur. So I only know that there is something wrong with the two containers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example 2</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.navbar-brand{
font-size:1.7em;
}
#topContainer{
background-image:url("image/background2.jpg");
width:100%;
background-size:cover;
color:white;
}
.box{
background-color:#F1F1F1;
border:1px solid grey;
}
#topRow{
margin-top:150px;
text-align:center;
}
#topRow h1{
font-size:350%;
}
.bold{
font-weight:bold;
}
.marginTop{
margin-top:30px;
}
.center{
text-align:center;
}
.buttonBorder{
border:1px solid #F8F8F8;
}
.title{
margin-top:30px;
font-size:350%;
}
.image-size{
margin:20px;
width:300px;
height:250px;
}
#bottomContainer{
background-color:#B19CE3;
width:100%;
}
.logo{
height:100px;
}
#myModal{
margin-top:100px;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">The way of GO</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<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 class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>About</li>
<li>Playing Go</li>
<li>Donate</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<label>Username</label>
<input type="email" placeholder="email..." class="form-control"
name="username"></input>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="password..." class="form-control"
name="password"></input>
</div>
<div class="form-group">
<button type="submit"class="btn btn-success">Log In</input>
</div>
</form>
</div>
</div>
</div>
<div class="container contentContainer" id="topContainer">
<div class="row">
<div class="col-md-6 col-md-offset-3" id="topRow">
<h1>So, what is GO?</h1>
<p class="lead ">Go is an ancient Chinese board game, in fact it's so ancient there is no other board game in the world
that we have found evidence of existing before go.</p>
<p class="bold marginTop">Interested? Subscribe now!</p>
<form class="marginTop">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="email" class="form-control"placeholder="your email..."></input>
</div>
<button class="btn btn-success btn-lg marginTop buttonBorder" type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
<div class="container contentContainer" id="aboutContainer">
<div class="row center">
<h1 class="center title">Why GO is Awesome</h1>
<p class="lead">Summary of Go's history and awesomeness</p>
</div>
<div class="row center">
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> History</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic1.jpg" />
</div>
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> How-to-play</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic2.jpg" />
</div>
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> Books</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic3.jpg" />
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="marginTop center">The way of GO</h2>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="email" placeholder="your email"></input>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="password"></input>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="confirm password"></input>
</div>
<button type="submit" class="btn btn-success">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container contentContainer" id="bottomContainer">
<div class="row center marginTop">
<h1 class="center title">Playing GO now!</h1>
<p class="lead center">Two most popular websites for go players</p>
</div>
<div class="row center marginTop">
<div class="col-md-6 center" >
<h1 class="title">KGS</h1>
<img class="marginTop logo" src="image/kgslogo.png" /></br>
<button class="btn btn-success marginTop">Play now!</button>
</div>
<div class="col-md-6 center">
<h1 class="title">Pandanet</h1>
<img class="marginTop logo" src="image/pandanet.png" /></br>
<button class="btn btn-success marginTop">Play now!</button>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("height", $(window).height()+"px");
</script>
</body>
</html>
It was because you were specifying the height of the containers.
http://plnkr.co/edit/lyDWUbFRJbHVVH0WYcyA
I commented out
<script>
$(".contentContainer").css("height", $(window).height()+"px");
</script>
and it doesn't overlap anymore. Simply wrapping that code in a resize handler will not work. You might wanna use margins or paddings instead. I haven't tested, though.
There were also quite a few other HTML errors that I fixed.