I have successfully made my banner/header responsive, and I placed the dropdown buttons inside a box. I am new to bootstrap and pretty much new to everything, so I just copied some codes from demos. I need help making this specific box responsive along with the other elements inside it. If the box is not the right solution, any suggestions would be appreciated. Thank you.
Here's the code snippet I am working with:
img.img-responsive {
margin: auto;
}
.masthead {
height: 1000px;
align: center;
background-image: url("../img/lEy8hs2.jpg]");
background-attachment: fixed;
background-repeat: no-repeat;
}
body {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
background-image: url(../img/lEy8hs2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
.box {
font-weight: 700;
box-shadow: inset 2px 2px 10px 10px #FC2B48;
border-radius: 100px;
background-color: #7D00C1;
padding: 50px 100px 50px;
margin: 50px;
margin-left: 200px;
width: 950px;
height: 1800px;
color: ##FFE900;
font-weight: 900;
}
/******************************************************
ROUNDED BUTTONS
******************************************************/
.btn-primary {
background-color: #BC1A45;
color: #FFFD7C;
}
.btn-lg.round {
border-radius: 32px;
}
/******************************************************
RAISED BUTTONS
******************************************************/
.btn-primary.raised {
box-shadow: 0 3px 0 0 #51096D;
}
.btn-primary.raised:active,
.btn-primary.raised.active {
background: #D31B4C;
box-shadow: none;
margin-bottom: -3px;
margin-top: 3px;
}
.box2 {
margin: 100px;
margin-left: 300px;
width: 300px;
height: 100px;
color: #F2F918;
}<!DOCTYPE html>
<html>
<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>Tekkenetic!</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="shortcut icon" href="img/favicon.ico" />
</head>
<body>
<!-- HEADER -->
<div class "img">
<div class="masthead">
<p>
<img src="img/51e5b810a79ab.png" alt="image" class="img-responsive" />
</p>
<div class="box">
<!-- 1st button -->
<div class="btn-group">
<button type="button" class="btn btn-primary btn-lg raised round"><span class="glyphicon glyphicon-home"></span> HOMEPAGE</button>
</div>
<!-- 2ND BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-picture"></span> GALLERY <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Game Screenshots</a>
</li>
<li><a href="#">Cool Fanarts</a>
</li>
</ul>
</div>
<!-- 3RD BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class=" glyphicon glyphicon-sunglasses"></span> CHARACTERS <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
</ul>
</div>
<!-- 4TH BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-plus"></span> EXTRAS <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Another action</a>
</li>
</ul>
</div>
<!-- 5TH BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class=" glyphicon glyphicon-info-sign"></span> ABOUT <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
</ul>
</div </div>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>