Hi Everyone,
I am trying to achieve the affect shown in [original image] where the "browse collection" div and the "request brochure" div line up with the four items above them.
I am trying to achieve the effect by using bootstrap and thought putting the elements in bootstraps "container" class would make everything line up. I haven't managed to get it to work yet though and the right sides don't line up. Can someone suggest a solution please? below is my code. thank you!
body {
font-family: 'Merriweather', serif;
}
/* content Area 2 */
.contentarea2{
background-color: #e3e2da;
width: 100%;
height: 585px;
position: relative;
}
.squares{
padding-top: 120px;
position: relative;
height: 100%;
}
.optionswrapper{
width: 100%;
height: 75px;
bottom: 0;
position: absolute;
color: orange;
}
.option1{
width: 50%;
height: 75px;
background-color: #2a2a2a;
float: left;
}
.option2 {
width: 50%;
height: 75px;
background-color: #9b998f;
float: right;
}
/* buttons */
.collection {
border-radius: 20px;
background-color: Transparent;
padding: 10px;
}
.collection:hover{
border-radius: 20px;
background-color: #3d3d3d;
padding: 10px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
/* animations */
.fade2 {
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.fade2:hover {
opacity: 0.5;
}
.overlay-portfolio{
padding: 25px;
position: absolute;
z-index:100;
bottom: 15px;
left: 5px;
color: #FFFFFF;
}
<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>container</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="custom.css" rel="stylesheet">
<!-- fonts -->
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="contentarea2">
<div class="container squares">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square1.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Modern</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square2.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Contemporary</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square3.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Minimalist</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square4.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Classic</h3>
</div>
</div>
</div>
<div class="optionswrapper">
<div class="option1">
</div>
<div class="option2">
</div>
</div>
</div>
</div>
<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>
</body>
</html>
Remove the inline class' from your squares and add the class col-xs-height col-top
and replace row container with row-same-height
that should put them all into proportion.
Related
I have a grid there have 20 different pictures and different sizes. The grid is made with bootstrap. On my example page I only post 3 grid elements. I would like to make an effect, so if a person hover over the image the effect will be something like this, but without the button:
Gradient effect example
I have tried to transfer this effect to my own image, but I cannot make it work. Can anybody see what I am doing wrong here?
Demo can be seen here
This is my demo ode until now:
body {
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
text-align: left
bottom: 8px;
left: 16px;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
.image-overlay {
position:relative;
display:inline-block;
}
.overlay {
position:absolute;
transition:all .3s ease;
opacity:0;
transition:1.9s;
background: #00b1bab8;
}
.image-overlay:hover .overlay {
opacity:1;
}
.overlayFade {
top:0;
background: rgba(27, 27, 27, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEMPLATE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div align="center">
<div>
<div class="image-overlay">
<img src="http://ercsirendelo.hu/_userfiles_/probarendelo/prevencio.jpg" alt="img" >
<div class="overlay overlayFade">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 margin_bottom">
<div class="image-overlay">
<!-- 770x480-->
<img src="https://d3j0sq6zklqdqq.cloudfront.net/photos/2017/03/06/107-40070-gilmore-girls-1488831826.jpg" alt="5" class="img-responsive" />
<div class="overlay overlayFade"></div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">Looking for having a good time</h3>
<span class="light-font">Here is where you should look</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- 430x235-->
<div class="image-overlay">
<img src="https://www.photolakedistrict.co.uk/wp-content/uploads/Daffodil-Winter-Wedding-Photo-Grasmere.jpg" alt="5" class="img-responsive" />
<div class="overlay overlayFade"></div>
<div class="inner-wrapper bottom-right">
<!--<button class="btn btn-success">Read More</button>-->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- 430x235-->
<div class="image-overlay">
<img src="http://ercsirendelo.hu/_userfiles_/probarendelo/prevencio.jpg" alt="5" class="img-responsive" />
<div class="overlay overlayFade"></div>
<div class="inner-wrapper bottom-right">
<!--<button class="btn btn-success">Read More</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Change the content of the .overlayFade class, adding left, right and bottom properties.
.overlayFade {
background: rgba(27, 27, 27, 0.5);
top: 0;
/* Like this */
bottom: 0;
left: 0;
right: 0;
}
You just need to add following in your css file....
image-overlay:hover .img-responsive {
opacity: 0.5;
}
Just give height or width like
.overlayFade{width: 100%; height: 100%;}
Hope this help
let me know further clearification
I have made 4 columns with bootstrap 3. Every column is 400x220px. I would do anything for make those columns 300x350px when the viewport hit < 768px. I do not know an method for doing this, and as I can see Bootstrap cannot do it.
I could use the the html5 <picture> tag. But I cannot see I can integrate that with the Bootstrap 3 grid, and it would not be a good solution in my eyes.
Does anybody have another idea on how I could do this, or is it not possible?
A demo of the columns is here.
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEMPLATE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-3 margin_bottom">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-left">
<h3>Here is headline 1</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-left">
<h3>Here is headline 2</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-right">
<h3>Here is headline 3</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-right">
<h3>Here is headline 4</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Add a class to your containers, give it a height... I think this is what you are asking for. If not, let me know!
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive { /*EDIT*/
width: 100%;
height: auto;
}
.btn-success {
width: fit-content;
}
/* Here you go */
.height-m {
height: 350px;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEMPLATE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-3 margin_bottom height-m">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-left">
<h3>Here is headline 1</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom height-m">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-left">
<h3>Here is headline 2</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom height-m">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-right">
<h3>Here is headline 3</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom height-m">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-right">
<h3>Here is headline 4</h3>
</div>
</div>
</div>
</div>
</body>
</html>
the layout I'm trying to make
Can anyone help me how to put the div below the carousel? I'm kinda new to this
Give the carrousel a z-index: 5; and position: relative; and give the div you want under it a position: relative; and top: -value where value is the pixels you want it to go up.
Instead of the <div class="carousel"> use your own carrousel div. and same with the header.
For more info on how z-index works visit https://www.w3schools.com/cssref/pr_pos_z-index.asp
header {
height: 80px;
width: 100vw;
background-color: yellow;
position: relative;
}
nav {
height: 40px;
width: 100vw;
background-color: pink;
position: absolute;
bottom: 0;
}
.carousel {
width: 100vw;
height: 100px;
background-color: RGBA(0,255,0,0.4);
z-index: 5;
position: relative;
}
.classname {
width: 80vw;
height: 200px;
background-color: lightblue;
display: block;
margin: 0 auto;
position: relative;
top: -40px;
}
header,
nav{
text-align: center;
line-height: 40px;
}
.carousel{
text-align: center;
line-height: 100px;
}
.classname{
text-align: center;
line-height: 200px;
}
<header>
Header
<nav>
Nav
</nav>
</header>
<div class="carousel">
Carousel
</div>
<div class="classname"> DIV below carousel</div>
You can try this solution. Using margin top.
JSFiddel Link: https://jsfiddle.net/VrtuosArs/9h8djmy2/1/
body {
color: #000;
}
header {
background: yellow;
padding: 0.1rem;
}
.headertext {
text-align: center;
color: #000;
}
nav {
background: #FF9EC5;
padding: 0.1rem;
}
#carousel {
background: #9BFF00;
padding: 1rem;
}
#bcarousel {
background: #95D6ED;
}
.dac {
height: 240px;
margin-top: -2rem;
}
footer {
background: #C2C2C2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Div carousel</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.0.0/cerulean/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Header</h1>
</div>
</div>
</div>
</header>
<nav>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Navbar</h1>
</div>
</div>
</div>
</nav>
<div class="container-fluid" id="carousel">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Carousel</h1>
</div>
</div>
</div>
<div class="container" id="bcarousel">
<div class="row dac">
<div class="col-6 offset-md-3 mx-auto">
<h3 class="text-center headertext">Div below carousel</h3>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Footer</h1>
</div>
</div>
</div>
</footer>
</body>
</html>
I am trying to change the opacity of my images, so that I can use a hover affect later on, to change the opacity back, creating a cool affect. The problem is the opacity attribute doesn't work! I can't seem to figure out the solution. Is it possible that Bootstrap is preventing this somehow?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
And my CSS: (the opacity attribute is in .affect)
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 50px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 1;
background-color: #070606;
}
You need to have a base state, and a hover state for your image. Change your CSS to:
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s;
}
.affect:hover img {
opacity: 1;
}
This creates the hover effect.
Opacity default value is 1 try making it 0.5.
I just put Bootstrap on to my website, and I have been testing it out. I have been trying to use there grid system, and I have run in to a mini problem. So on my website I have a Header, and it looks like this "Buttons 1-6 | Logo | Login". Now when my website retracts to the size of 767 pixels and smaller it still displays as above, but they each have there own row. So it looks like this "Buttons 1-6 (Top Row) | Logo (Second Row) | Login (Third Row)". Now whenever I try to do push and pull on the things, it still does not fix it. Eventually I would like it to display like this "Logo (Top Row) | Buttons 1-6 (Second Row) | Login (Third Row)" on a screen below 767 pixels. This is my HTML file:
<div id="wrapper" class="container">
<div id="header" class="row">
<div id="headerleftside" class="col-lg-4 col-md-4 col-sm-4">
<div class="row">
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 1 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 2 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 3 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 4 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 5 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 6 </h1>
</div>
</a>
</div>
</div>
<div id="headertitle" class="col-lg-4 col-md-4 col-sm-4">
</div>
<div id="headerrightside" class="col-lg-4 col-md-4 col-sm-4">
<form action="action.php" method="post">
<button id="headersubmit" input type="submit"> Login </button>
<p class="logininputboxs"> <input type="text" name="username" placeholder="Userame" required/> </p>
<p class="logininputboxs"> <input type="password" name="password" placeholder="Password" required/> </p>
</form>
</div>
</div>
</div>
Also please note, the above code does not have , , and other tags because this file is being used as a include() from PHP. Then the CSS file is below:
/*
Used Colors:
• Black - Black
• Orange - Orange
• Light Blue - #4DB8FF
• Normal Blue - #296ACC
• Normal Blue (Darker) - #2156A6
• Gray - #292D30
*/
/*-------------------------------------------------------*/
#wrapper {
width: 100%;
height: 750px;
position: absolute;
}
/*-------------------------------------------------------*/
#header {
height: 15%;
background-color: #292D30;
position: static;
border-bottom: 5px solid #296ACC;
z-index: 5;
}
/*-------------------------------------------------------*/
#headerleftside {
background-color: #292D30;
}
.headerbuttons {
background-color: black;
font-size: 65%;
text-align: center;
margin-left: auto;
margin-right: auto;
line-height: 0%;
font-color: #4DB8FF; /*The color is defined in the <head>, as well as the hover.*/
border: 1px solid white;
border-radius: 5px;
}
/*-------------------------------------------------------*/
#headertitle {
height: 120%;
background-color: black;
border-bottom: 5px solid #2156A6;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 10;
background: black url("http://localhost/postin'/title.png") no-repeat center center;
}
#headertitle:hover {
box-shadow: 0px 0px 5px 5px #2156A6;
z-index: 10;
background: black url("http://localhost/postin'/title_with_logo.png") no-repeat center center;
}
/*-------------------------------------------------------*/
#headerrightside {
background-color: #292D30;
}
.logininputboxs {
margin-left: 5%;
margin-top: 0%
}
input[type=text] {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid #4DB8FF;
border-radius: 3px;
}
input[type=password] {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid #4DB8FF;
border-radius: 3px;
}
.input_error_required {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid red;
border-radius: 3px;
}
.input_error_unique {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid red;
border-radius: 3px;
}
#headersubmit {
width: 15%;
height: 10%;
font-size: 100%;
border: 1px solid white;
border-radius: 3px;
text-align: center;
color: #4DB8FF;
background-color: black;
margin-left: 45%;
}
/*-------------------------------------------------------*/
#sidebar {
height: 84%;
width: 20%;
background-color: red;
position: static;
z-index: 1;
}
.sidebarbuttons {
width: 80%;
height: 12%;
margin-left: auto;
margin-right: auto;
background-color: white;
border-radius: 5px;
position: relative;
text-align: center;
font-size: 80%;
line-height: 500%;
top: 5%;
}
/*-------------------------------------------------------*/
a, u {
text-decoration: none; !important
}
Then finally the actual file is also done by Include() below by PHP:
<html lang="en-US">
<link rel="icon" type="image/png" href="http://localhost/postin'/favicon.ico?v=2">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.1-dist/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
<style type="text/css">
a:link {color: #4DB8FF;} /* unvisited link */
a:visited {color: #4DB8FF;} /* visited link */
a:hover {color: orange;} /* mouse over link */
a:active {color: orange;} /* selected link */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-push-4">
LOGO
</div><!-- /.col-sm-4 -->
<div class="col-sm-4 col-sm-pull-4">
BUTTONS
</div><!-- /.col-sm-4 -->
<div class="col-sm-4">
OTHER STUFF
</div><!-- /.col-sm-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
DEMO: https://jsbin.com/mutoju/1/edit
Order the html as it is on small viewports
Push and pull at the min-width
.col-sm-4 is the same as .col-md-4 and .col-lg-4. It's 33.3333% of the parent. From the .col-sm- min-width (768px by default) till whenever, that will be the size. So you don't need to use .col-md-4 or .col-lg-4, it's redundant.