Bootstrap grid layout on top of a background with padding - html

Please excuse me for butchering all of the terms here, but I am going to try to get across what I hope to accomplish. Right now I have managed to create a background image that scales to the window size and a navigation bar. I would like to start adding some bootstrap grid items on top of all this, but also under the navigation bar. Here is my 3-year-old depiction of what I am trying to make:
As of right now, I have called the background image class and then the navigation class. I am now trying to add a container so that I can use a bootstrap grid of some sort to add the four buttons and a panel.
The issues I am running into are that it seems blank rows will 0 in height and not create the buffer from the top. Another issue i have is the layering. My bootstrap grid items appear behind my background.
Can someone please point me in the right direction for layout? Am I doing this all wrong and should be using something else entirely? I am really trying to keep all of this to a single index.html file and avoid importing unneeded assets or running a bunch of scripts.
Here is the code I am working with right now:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: .80;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("img/home_bg.jpg");
height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #fff;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu form div {
padding: 0px 20px;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
</style>
</head>
<body>
<div class="bgimg-1"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="myhomepage">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['username']) && !empty($_SESSION['username'])): ?>
<li class="dropdown">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">WELCOME, <?php echo $_SESSION['username'] ?><span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LOGOUT</li>
</ul>
</li>
</li>
<?php else: ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">REGISTER<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="reg_username" id="reg_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="email" name="reg_email" id="reg_email" class="form-control" placeholder=" Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="reg_password_1" id="reg_password_1" class="form-control" placeholder=" Password">
</div>
<div class="form-group">
<input type="password" name="reg_password_2" id="reg_password_2" class="form-control" placeholder=" Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="register-submit" id="register-submit" class="form-control btn btn-info" value=" Register Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="log_username" id="log_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="password" name="log_password" id="log_password" class="form-control" placeholder=" Password">
</div>
<!--
<div class="form-group">
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
-->
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-info" value=" Login Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2" style="background-color:yellow;">test1</div>
<div class="col-sm-2" style="background-color:yellow;">test2</div>
<div class="col-sm-2" style="background-color:yellow;">test3</div>
<div class="col-sm-2" style="background-color:yellow;">test4</div>
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>
I appreciate any and all help. Thank you.


Okay, after messing around with this a bit I figured out that you can just stack containers and then make the highest level container have an image in the style section. I am not sure if this is the proper approach, but it seems to be putting the bootstrap containers on top of the background. The only issues I see are the lack of padding at the moment and now my navigation bar dropdowns now display behind the container buttons. That being said, I wanted to at least get this up here in case anyone can fill in the blanks.
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #fff;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu form div {
padding: 0px 20px;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
.button, .tablinks {
margin-bottom: 0;
background-color: #2d2d30;
color: #d5d5d5;
border: none;
outline:none;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
.active, .button:hover, .tablinks:hover {
color: #fff;
background-color: #555 !important;
}
.container-bg {
position: relative;
opacity: .80;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("img/home_bg.jpg");
height: 100%;
}
</style>
</head>
<body>
<div class="container-bg">
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="myhomepage">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['username']) && !empty($_SESSION['username'])): ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">WELCOME, <?php echo $_SESSION['username'] ?><span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LOGOUT</li>
</ul>
</li>
<?php else: ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">REGISTER<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="reg_username" id="reg_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="email" name="reg_email" id="reg_email" class="form-control" placeholder=" Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="reg_password_1" id="reg_password_1" class="form-control" placeholder=" Password">
</div>
<div class="form-group">
<input type="password" name="reg_password_2" id="reg_password_2" class="form-control" placeholder=" Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="register-submit" id="register-submit" class="form-control btn btn-info" value=" Register Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="log_username" id="log_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="password" name="log_password" id="log_password" class="form-control" placeholder=" Password">
</div>
<!--
<div class="form-group">
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
-->
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-info" value=" Login Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</nav>
</div>
<!-- Tab links -->
<div class="tab" id="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')" id="defaultOpen">tab1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">tab2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">tab3</button>
<button class="tablinks" onclick="openTab(event, 'tab4')">tab4</button>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<!-- Tab content -->
<div id="tab1" class="tabcontent">
<h3>tab1</h3>
<p>list stuff for tab1</p>
</div>
<div id="tab2" class="tabcontent">
<h3>tab2</h3>
<p>list stuff for tab2</p>
</div>
<div id="tab3" class="tabcontent">
<h3>tab3</h3>
<p>list stuff for tab3</p>
</div>
<div id="tab4" class="tabcontent">
<h3>tab4</h3>
<p>list stuff for tab4</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>

Related

Applying CSS to Struts in a JSP page

I'm trying to add css to my website but It just load half of the page and stop. Anyone have an idea about this problem? Thank you so much.
It stopped loading right before the confirm textfield, the whole page was loaded correctly.
Sorry if the code is hard to read. I'm new to coding.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
<title>HVH's Store</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<style>
html, body {
position: relative;
}
ul.navbar-hungdtq > li {
font-weight: bold;
text-align: center;
}
.navbar{
margin-bottom: 0;
}
.navbar-footer > li {
font-weight: bold;
text-align: center;
}
.login-form{
padding: 10px;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
div.swiper-slide > img {
width: 600px;
height: 800px;
}
.container-hungdtq{
background: white;
padding: 1%;
width: 100%;
height: 10vh;
}
.main-hungdtq{
background: white;
padding-top: 1%;
}
.mega-menu {
position: absolute;
padding: 10px 0px;
width: 110vh;
height: 82vh;
border-radius: 0;
margin-top: 0px;
}
.mega-menu li {
display: inline-block;
float: left;
font-size: 0.94rem;
padding: 3px 0px;
}
.mega-menu li.mega-menu-column {
margin-right: 20px;
width: 20vh;
}
.mega-menu .nav-header {
padding: 0 !important;
margin-bottom: 10px;
display: inline-block;
width: 100%;
border-bottom: 1px solid #ddd;
}
li.mega-menu-column > ul > li > a{
color: #777;
}
li.mega-menu-column > ul {
display: inline-block;
}
li.mega-menu-column > ul > li {
font-size: 1.5vh;
}
.well{
padding: 8vh 0vh;
}
h4 {
font-size: 8vh;
}
/* Profile container */
.profile {
margin: 20px 0;
}
/* Profile sidebar */
.profile-sidebar {
padding: 20px 0 10px 0;
background: #fff;
}
.profile-userpic img {
float: none;
margin: 0 auto;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.profile-usertitle {
text-align: center;
margin-top: 20px;
}
.profile-usertitle-name {
color: #5a7391;
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.profile-usertitle-job {
text-transform: uppercase;
color: #5b9bd1;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
.profile-userbuttons {
text-align: center;
margin-top: 10px;
}
.profile-userbuttons .btn {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
padding: 6px 15px;
margin-right: 5px;
}
.profile-userbuttons .btn:last-child {
margin-right: 0px;
}
.profile-usermenu {
margin-top: 30px;
}
.profile-usermenu ul li {
border-bottom: 1px solid #f0f4f7;
}
.profile-usermenu ul li:last-child {
border-bottom: none;
}
.profile-usermenu ul li a {
color: #93a3b5;
font-size: 14px;
font-weight: 400;
}
.profile-usermenu ul li a i {
margin-right: 8px;
font-size: 14px;
}
.profile-usermenu ul li a:hover {
background-color: #fafcfd;
color: #5b9bd1;
}
.profile-usermenu ul li.active {
border-bottom: none;
}
.profile-usermenu ul li.active a {
color: #5b9bd1;
background-color: #f6f9fb;
border-left: 2px solid #5b9bd1;
margin-left: -2px;
}
/* Profile Content */
.profile-content {
padding: 20px;
background: #fff;
min-height: 460px;
}
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border:2px solid #03b1ce ;}
.tital{ font-size:16px; font-weight:500;}
.bot-border{ border-bottom:1px #f8f8f8 solid; margin:5px 0 5px 0}
</style>
<s:head/>
</head>
<body>
<!--Tool bar-->
<nav class="navbar navbar-default navbar-fixed-top main-hungdtq">
<div class="container-hungdtq">
<div class="col-md-1" >
<a class="navbar-brand" rel="home" href="#">
<img style="max-width: 100px; margin-top: -50px;" src="https://i.pinimg.com/736x/6f/55/e1/6f55e1ddd3d428846ab97062f9af3ad8--line-logo-design-logo-k.jpg">
</a>
</div>
<div class="col-md-1">
</div>
<div class="col-md-5">
<form action="SearchForBookAction">
<div class="input-group">
<input type="text" class="form-control" placeholder="Tìm kiếm" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<div class="col-md-1">
</div>
<s:set var="username" value="%{#session.USERNAME}"/>
<s:set var="fail" value="%{#session.failed}"></s:set>
<ul class="nav navbar-nav col-md-4">
<s:if test="%{#username == null || #username == ''}">
<li class="col-md-3"><span class="glyphicon glyphicon-user"></span> Đăng ký</li>
<!--Login-->
<li class="col-md-3">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span>Đăng nhập</a>
<div class="dropdown-menu login-form" style="padding: 15px; padding-bottom: 0px;">
<form action="login" class="form-inline">
<div class="form-group">
<label>Username: </label>
<input class="form-control" type="text" placeholder="Enter username" name="username">
</div>
<div>
<label>Password: </label>
<input class="form-control" type="password" placeholder="Enter password" name="password">
</div>
<input type="submit" value="Đăng nhập" class="btn btn-success" style="margin-top: 5px; margin-bottom: 5px; margin-left: 25%">
</form>
<script>
<s:if test="%{#fail != null}">
alert("Wrong username or password!");
</s:if>
</script>
</div>
</li>
<!--End of Login-->
</s:if>
<s:if test="%{#username != null || #username == ''}">
<li class="col-md-4"><span class="glyphicon glyphicon-log-in">Welcome, <s:property value="#username"/></span></li>
<li class="col-md-4"><span claRedirectToProfileActionss="glyphicon glyphicon-log-in"></span> Tài khoản của tôi</li>
<li class="col-md-2"><span class="glyphicon glyphicon-shopping-cart"></span></li>
</s:if>
</ul>
</div>
<!--Navigation bar-->
<nav class="navbar navbar-default">
<ul class="navbar-hungdtq nav navbar-nav row" style="width: 100%;">
<li class="col-md-1"></li>
<li class="col-md-2">SÁCH BÁN CHẠY</li>
<li class="col-md-2">KHUYẾN MÃI HOT</li>
<li class="dropdown col-md-2">
<a class="dropdown" data-toggle="dropdown" href="#">KHO SÁCH<span class="caret"></span></a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-column">
<ul>
<li class="nav-header">Khoa học kỹ thuật</li>
<li>Tin học</li>
<li>Y học</li>
<li>Điện - điện tử</li>
<li>Cơ khí</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Kinh tế</li>
<li>Quản trị - Lãnh đạo</li>
<li>Nhân vật - Bài học kinh doanh</li>
<li>Khởi nghiệp - Làm giàu</li>
<li>Marketing - Bán hàng</li>
<li>Tài chính - Ngân hàng</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Thiếu nhi</li>
<li>Truyện tranh</li>
<li>Truyện đọc</li>
<li>Tô màu - Luyện chữ</li>
<li>Kiến thức bách khoa</li>
<li>Manga</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Văn học trong nước</li>
<li>Phóng sự - Ký sự</li>
<li>Nhân vật văn học</li>
<li>Thơ ca</li>
<li>Tiểu thuyết lịch sử</li>
<li>Tiểu thuyết lãng mạng</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Văn học nước ngoài</li>
<li>Cổ tích - Thần thoại</li>
<li>Truyện lịch sử</li>
<li>Truyện ngắn</li>
<li>Truyện trinh thám</li>
<li>Vụ án</li>
</ul>
</li>
</ul>
</li>
<li class="col-md-2">SỰ KIỆN SÁCH</li>
<li class="col-md-2">KHO SÁCH CŨ</li>
</ul>
</nav>
<!--End of Navigation bar-->
</nav>
<!--End of Tool bar-->
<!--Body-->
<div style="padding-top: 180px ">
<div class="container">
<s:form cssClass="well form-horizontal" action="register" method="get" id="contact_form" theme="simple">
<center><h4>REGISTER</h4></center>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Tên của bạn:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="name" placeholder="" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Username</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="username" placeholder="Tên tài khoản" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Mật khẩu:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="password" placeholder="" cssClass="form-control" type="password"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Xác nhận:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="confirm "placeholder=" mật khẩu của bạn" cssClass="form-control" type="password"/>
</div>
</div>
</div>
<!-- Pick -->
<div class="form-group">
<label class="col-md-4 control-label">Giới tính</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<s:combobox label="Hãy chọn giới tính của bạn" name="gender" cssClass="form-control selectpicker"
list="{'1':'Nam', '2':'Nu'}
"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<s:textfield name="email" placeholder="Địa chỉ E-Mail" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Địa chỉ</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="address" placeholder="Địa chỉ của bạn" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Số điện thoại</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<s:textfield name="phone" placeholder="(08)" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<s:submit type="submit" cssClass="btn btn-warning" name="Đăng ký" /><span class="glyphicon glyphicon-send"></span>
</div>
</div>
</s:form>
</div>
</div>
<!--End of Body-->
<!--Footer-->
<footer class="footer">
<nav class="navbar navbar-default">
<ul class="navbar-footer nav navbar-nav row" style="width: 100%;">
<li class="col-md-1"></li>
<li class="col-md-2">VỀ CHÚNG TÔI</li>
<li class="col-md-2">LIÊN HỆ</li>
<li class="col-md-2">ĐỊA ĐIỂM</li>
<li class="col-md-2">ĐÓNG GÓP Ý KIẾN</li>
<li class="col-md-2">CHÍNH SÁCH</li>
</ul>
</nav>
</footer>
<!--End of Footer-->
</body>
This is the image of my website after being loaded

Bootstrap/css/html: click not working on input and glyphicon not aligned correctly

I have the following code for my form:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="flags.min.css">
<link rel="stylesheet" type="text/css" href="css2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="build/css/intlTelInput.css">
<script src="google/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.d-flex {
display: flex;
flex-direction: column;
height: 89vh;
}
.flex-grow {
flex-grow:1;
height: 100%;
}
#grad1 {
background: -webkit-linear-gradient(to right, rgba(243,116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important; /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to right, rgba(243, 116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important; /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to right, rgba(243, 116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important; /* For Fx 3.6 to 15 */
background: linear-gradient(to right, rgba(243, 116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important;/* Standard syntax (must be last) */
background: -webkit-linear-gradient(left, #F37423,#F37423,#F79831 50%,#F37423,#F37423);
background: -ms-linear-gradient(left, #F37423,#F37423,#F79831 50%,#F37423,#F37423);
}
.active a{
color: #F37423 !important;
background-color: transparent !important;
}
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style glyph */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align glyph */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
/*select:invalid { color: gray; }
*/
</style>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">
<img src="logo.svg" alt="Nice coconut tree"/>
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="hidden"></li>
<li>LE PRINCIPE</li>
<li>INSCRIPTION</li>
<li>ESPACE CLIENT</li>
<li>A PROPOS</li>
<li>NOS ENGAGEMENTS</li>
<li><img class="flag flag-gb" alt="" /></li>
</ul>
</div>
<!-- <hr style="padding-top: 0px;margin-top: 0px;width: 90%;height: 1px; background-color: #BEBEBE;"> -->
<hr style="padding-top: 0px;margin-top: 0px;width: 90%;margin-bottom: 0px;padding-bottom: 0px;height: 1px; background-color: #BEBEBE;">
</div>
</nav>
<script src="jquery.bootstrap-autohidingnavbar.min.js"></script>
<script>
window.addEventListener("scroll", function() {
if (window.scrollY > 20) {
$('.navbar').fadeOut();
}
else {
$('.navbar').fadeIn();
}
},false);
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
</script>
<div class="container">
<div class="row flex-grow">
<div class="col-xs-offset-1 col-xs-10 col-lg-12 col-lg-offset-0">
<div class="row">
<br>
<h1>inscription</h1>
<hr style="padding-top:0px;margin-top:0px; border: 1px solid;">
</div>
<br><br><br>
<div class="row" id="grad1" style="padding-top: 3%;">
<div class="col-lg-8 col-lg-offset-2">
Nous sommes sincèrement très heureux<br>
Nous vous remercions de bien :
</div><br>
</div>
<div class="row" id="grad1">
<br>
<div class="col-xs-offset-1 col-xs-10 col-lg-offset-4 col-lg-4">
<form method="post" action="serv2.php" onsubmit="return submitForm(this);"> <!-- onsubmit="return submitForm(this);" -->
<fieldset>
<div class="row">
<div class="form-group col-lg-6">
<label for="sexe" class="radio bold" style="color:white;">
<input type="radio" name="sexe" id="mr">Homme</label>
</div>
<div class="form-group col-lg-6">
<label for="sexe" class="radio bold" style="color:white;">
<input type="radio" name="sexe" id="mme">Femme</label>
</div>
<div class="form-group col-lg-6 prenom" style="padding-left: 0px;">
<input type="text" id="prenom" name="prenom" class="form-control" placeholder="Prénom"/>
</div>
<div class="form-group col-lg-6 nom" style="padding-left: 0px;padding-right: 0px">
<input type="text" id="nom" name="nom" class="form-control" placeholder="Nom"/>
</div>
<div class="form-group">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" id="mail" name="mail" class="form-control" placeholder="Email" />
</div>
</div>
<div class="form-group">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-lock"></i>
<input type="password" id="mdp1" name="mdp1" class="form-control" placeholder="Mot de passe (8 caractères min.)" />
</div>
</div>
<div class="form-group">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-lock"></i>
<input type="password" id="mdp2" name="mdp2" class="form-control" placeholder="Confirmer le mot de passe" />
</div>
</div>
<div class="form-group">
<?php
$selected = '';
echo '<select class="form-control" id="annee" name="annee">',"\n";
echo '<option value="" disabled selected hidden>Année de naissance</option>';
for($i=1900; $i<=2017; $i++)
{
if($i == date('Y'))
{
$selected = ' selected="selected"';
}
echo "\t",'<option value="', $i ,'"','>', $i ,'</option>',"\n";
$selected='';
}
echo '</select>',"\n";
?>
</div>
<div class="form-group col-lg-6 col-lg-offset-3">
<div>
<label for="bouton"><br></label>
<div>
<button type="submit" class="btn btn-default" style="background-color: #00B0F0; color:white; width: 100%;border:none;">Valider</button>
</div>
</div>
</div>
<div class="form-group col-lg-3">
<div>
<label for="message"><br></label>
</div>
<span class="form-control hide" id="error-msg" style="border:none; color: red; background-color:#ED7D31;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;">mots de passe différents</span>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row" id="grad1">
<div class="col-lg-8 col-lg-offset-2" style="padding-bottom: 3%;">
Après validation vous allez immédiatement reçevoir un Email qui vous permettra
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css2.css:
#media (max-width: 767px) {
.col-xs-6 {
margin-top:-20px;
}
.col-xs-12{
text-align:center;
}
}
#font-face {
font-family: 'comforta-reg';
src: url('Comfortaa-Regular.ttf');
}
#font-face {
font-family: 'comforta-bold';
src: url('Comfortaa-Bold.ttf');
}
#font-face {
font-family: 'comforta-light';
src: url('Comfortaa-Light.ttf');
}
.bold{
font-family: 'comforta-bold';
}
body { padding-top: 70px;
font-family: 'comforta-reg', Arial, serif;
}
.navbar{
background-color: white;
border: 0;
border-color:#25AAE2;
box-shadow: none;
-webkit-box-shadow: none;
padding-top: 20px;
padding-bottom:0px;
}
.navbar-nav > li{
/*padding-left:15px;*/
padding-right:40px;
}
.navbar-brand img {width: 210px;}
.navbar-brand{padding-top: 0px;}
/*#ED7D31;*/
.orange{background-color: #F4862A;} /*Couleur orange*/
.orangeFade{background: radial-gradient(white, #F4862A);}
.row3{background-color: #5F5F5F;}
.indent{ padding-left: 10em;}
.iti-flag {background-image: url("img/flags.png");}
#media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.iti-flag {background-image: url("img/flags#2x.png");}
}
It displays this:
As you can see, the glyphicon-user is not aligned on the email input as it should be, and also (you can't see it unfortunately), when I click on the Name and Surname input the click has no effect (i.e: impossible to write on those inputs), the same occurs for the female radiobutton.
I really don't see what I am missing here, I am struggling with this for an hour now, any idea ?
Thank you

Bootstrap container adds padding towards right end of webpage

I am using bootstrap for my application and I observe that it adds 15px padding. I looked up at the possible errors and it doesnt seem as if I am making any of these errors (like putting a container inside a row etc)
This is my code.
<div class="container-fluid">
<header id="topheader">
<div class="row">
<div class="col-md-3">
<h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
</div>
<div class="col-md-9">
<form id="fullform">
<div id="formdiv" class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div style="" class="col-md-3 login">
<label for="email"></label>
<input class="login_input" type="text" name="email" placeholder="Type your email here">
</div>
<div style="" class="col-md-3 login">
<input class="login_input" type="password" name="password" placeholder="Type your password here">
</div>
</div>
</form>
</div>
</div>
</header>
</div>
I am adding my css too :
body html {
padding: 0;
margin: 0;
/*background-color: black;*/
}
.container-fluid {
padding-right:0px;
padding-left:0px;
margin-right:auto;
margin-left:auto;
}
#topheader {
position: relative;
background-color: #563d7c;
box-shadow: 8px 6px 2px black;
}
#logo {
position: relative;
left: 6vw;
/*top: -3vh;*/
color: white;
}
.login {
position: relative;
/*top: 4vh;*/
height: 12vh;
}
.login_input {
position: absolute;
top: 3vh;
}
#formdiv {
left: 5vw;
}
#d1 {
position: relative;
font-size: 5vh;
transform: rotate(40deg);
}
input{
/*background: #ecf0f1;*/
width: 15vw;
padding: 10px;
font-family: "Open Sans";
color: #7f8c8d;
border-style: solid;
border-width: 0;
border-bottom-width: 3px;
border-color: #bdc3c7;
outline: none;
border-radius: 5px 0px 5px 0px;
-webkit-transition: 0.1s ease-in-out;
}
input:focus{
border-color: #3498db;
color: #34495e;
}
#media screen and (max-width: 989px) {
#logo {
left: 35vw;
}
.login {
position: relative;
/*top: 4vh;*/
height: 7vh;
}
.login_input {
top: -1vh;
left: 25vw;
}
input {
width: 50vw;
}
}

Bootstrap immediately expects row after container-fluid class. And you are adding header tag there. Remove header tag and you can add id="topheader" to the div. row class minus 15 px. Try the following:
<div class="container-fluid">
<div class="row" id="topheader">
<div class="col-md-3">
<h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
</div>
<div class="col-md-9">
<form id="fullform">
<div id="formdiv" class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div style="" class="col-md-3 login">
<label for="email"></label>
<input class="login_input" type="text" name="email" placeholder="Type your email here">
</div>
<div style="" class="col-md-3 login">
<input class="login_input" type="password" name="password" placeholder="Type your password here">
</div>
</div>
</form>
</div>
</div>
</div>
If you dont want to remove header tag. Then wrap your container-fluid div into header tag. This will works as well like:
<header id="topheader">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
</div>
<div class="col-md-9">
<form id="fullform">
<div id="formdiv" class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div style="" class="col-md-3 login">
<label for="email"></label>
<input class="login_input" type="text" name="email" placeholder="Type your email here">
</div>
<div style="" class="col-md-3 login">
<input class="login_input" type="password" name="password" placeholder="Type your password here">
</div>
</div>
</form>
</div>
</div>
</div>
</header>

Do you asking for this 15px padding that is property of container-fluid class
In that case just over ride the container-fluid class and put padding-left:0 and padding-right:0;
like this,
.container-fluid{
padding-left:0;
padding-right:0;
}
put it in the other file don't change the bootstrap's css file

How to center social buttons in bootstrap login page?

I am using django-allauth, bootstrap, font awesome and bootstrap-social for the social media login buttons in my login form. I can't figure out how to center the social buttons within my login-well below. It appears to be aligning to the right of the login well instead of centered. What should I be doing?
jsfiddle
html:
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="well login-well">
<div class="socialaccount_ballot col-md-11">
<ul class="socialaccount_providers">
<li>
<a title="Google" class="btn btn-block btn-social btn-md socialaccount_provider btn-google" href="/accounts/google/login/?process=+login+">
<i class="fa fa-google"></i>Log in with Google
</a>
</li>
<li>
<a title="Facebook" class="btn btn-block btn-social btn-md socialaccount_provider btn-facebook" href="/accounts/facebook/login/?process=+login+">
<i class="fa fa-facebook"></i>Log in with Facebook
</a>
</li>
<li>
<a title="Twitter" class="btn btn-block btn-social btn-md socialaccount_provider btn-twitter" href="/accounts/twitter/login/?process=+login+">
<i class="fa fa-twitter"></i>Log in with Twitter
</a>
</li>
</ul>
</div>
<div class="col-md-12">
<hr>
<form class="login" method="POST" action="/login/">
<div class="form-group"><label class="control-label" for="id_login">Username</label><input autofocus="autofocus" class="form-control" id="id_login" maxlength="30" name="login" placeholder="Username" required="required" title="" type="text" /></div>
<div class="form-group"><label class="control-label" for="id_password">Password</label><input class="form-control" id="id_password" name="password" placeholder="Password" required="required" title="" type="password" /></div>
<div class="form-group"><div class="checkbox"><label for="id_remember"><input class="" id="id_remember" name="remember" type="checkbox" /> Remember Me</label></div></div>
<div class="form-group pull-center">
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</div>
</form>
<hr>
</div>
<div class="form-group">
<small><a class="text-muted" href="/password_reset/">Forgot Password?</a></small>
<br>
<small><a class="text-muted" href="/signup/">Sign up</a></small>
</div>
</div>
</div>
</div>
</div>
css:
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
.socialaccount_providers li a.socialaccount_provider {
rem-border: 1px solid #ddd;
border-radius: 2px;
rem-box-shadow: 2px 2px 8px rgba(0,0,0,.7);
-padding: 10px;
margin-bottom: 6px;
display: block;
width: 100%;
overflow: hidden;
rem-font-size: 1.2em;
}
.socialaccount_providers li a.socialaccount_provider:hover {
text-decoration: none;
box-shadow: 1px 1px 2px rgba(0,0,0,.7);
}
.socialaccount_providers li a.socialaccount_provider.facebook {
background: #4B67A3;
color: #fff;
}
.socialaccount_providers li a.socialaccount_provider.facebook:before {
font-family: FontAwesome;
font-size: 1.9em;
content: "\f082";
display: inline-block;
padding-left: 8px;
padding-right: 8px;
}
What I want it to look like when social buttons are centered:

The ul.socialaccount_providers has a inexplicit padding-left = 40px;
Just throwing in .socialaccount_providers {padding-left:0;} fixes it.

glyphicon-search not coming inside the form

I want the glyphicon-search icon to be on the rightmost side inside the form but it is not coming inside the form.Can anyone tell how this can be done?
Well..cant we override glyhicon-search class to achieve the goal?If yes, then how(Im trying to do that but I am not achieving the desired result especially on shrinking the webpage)?
<div class="bar navbar-inverse navbar-fixed-top">
<div class="container">
<div id="logo">
XYZ
</div>
<div class="col-xs-5 right-inner-addon ">
<form class="form-inline" role="form">
<div class="form-group has-feedback">
<div class="row">
<div class="col-xs-11">
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-search form-control-feedback"></span></div></div></div>
</div>
</form>
</div>
</div>
.right-inner-addon {
padding-top: 8px;
padding-left:30px;
}
.right-inner-addon input {
height: 30px;
padding: 0px 10px;
}
.right-inner-addon i {
position: relative;
right: 0px;
padding: 10px 12px;
pointer-events: none;
}
.form-control{
min-width: 400px;
max-width: 400px;
top: 7px;
}

Apply it as a background-iamge to the input: <input type="text" class="form-control" id="inputSuccess4"> Or gieve the icon element a display:block / inline-block property.