I'm trying to accomplish the below using CSS:
Required Output Image
I have tried to place horizontal line and content in between those div, but I am not getting that.
I tried below code
HTML code:
<div class="col-12">
<div class="row mt-3 mb-3">
<div class="col-md-2 offset-md-1 text-center">
<div class="d-flex flex-column" style="font: normal normal 600 12px/24px Gellix Semi Bold; color: #000048;">
<div class="align-self-center ExcelBox d-flex justify-content-center align-items-center">
<div class="d-flex justify-content-center align-items-center">
<!-- Excel images comes -->
</div>
</div>
<div class="mt-2" style="font: normal normal normal 12px/24px Gellix Regular; color: #53565A;">
Application / Ticket Download</div>
<div class="mt-2">
<button class="upload-Downloadbtn">
Download
</button>
</div>
</div>
</div>
<div class="col-md-5 ">
<!-- Horizontal Line need come here as like in image -->
</div>
<div class="col-md-2 offset-md-1 text-center">
<div class="d-flex flex-column" style="font: normal normal 600 12px/24px Gellix Semi Bold; color: #000048;">
<div class="align-self-center ExcelBox d-flex justify-content-center align-items-center">
<div class="d-flex justify-content-center align-items-center">
<!-- Excel images comes -->
</div>
</div>
<div class="mt-2" style="font: normal normal normal 12px/24px Gellix Regular; color: #53565A;">
Application / Ticket Upload</div>
<div class="mt-2">
<button class="upload-btn">
Upload
</button>
</div>
</div>
</div>
</div>
</div>
I Have tried and the output image I share it below:
enter image description here
I am unable to share the CSS its showing error.
CSS code:
.upload-btn {
width: 121px;
height: 32px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 4px;
color: #2F78C4;
font: normal normal 600 14px/13px Gellix Semi Bold;
border: 1px solid #2F78C4;
}
.upload-btn img{
width: 18px;
height: 15px;
display: inline-block;
margin-right: 5px;
margin-top: -3px;
vertical-align: middle;
}
.upload-Downloadbtn {
width: 140px;
height: 32px;
background: #26EFE9 0% 0% no-repeat padding-box;
border-radius: 4px;
color: #000048;
font: normal normal 600 14px/13px Gellix Semi Bold;
border: none;
}
.upload-Downloadbtn img {
width: 18px;
height: 15px;
display: inline-block;
margin-right: 5px;
margin-top: -3px;
vertical-align: middle;
}
.TicketHorLine
{
border-bottom:2px solid black;
padding-bottom:15px;
position:relative;
}
.TicketHorLine:before, .TicketHorLine:after
{
position:absolute;
bottom:-6px; left:0;
height:10px;
width:10px;
background:black;
content:"";
border-radius:5px;
}
.TicketHorLine:after
{
right:0;
left:auto;
}
.ExcelBox {
background-color: #FFFFFF;
border-radius: 50%;
height: 74px;
width: 74px;
border: 1px solid #059F4C;
}
section+section { border-top-style: solid; border-top-width: .1em; }
Created a sample, similar to image in your question
<!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.0">
<title>Document</title>
<style>
.hr{
display: flex;
width:100%;
align-items: center;
}
.hr__dot{
height:10px;
width:10px;
background-color: black;
border-radius: 5px;
}
.hr__line{
border-top:2px solid black;
min-width: 500px;
width: max-content;
}
</style>
</head>
<body>
<div>One</div>
<div class="hr">
<div class="hr__dot"></div>
<div class="hr__line"></div>
<div class="hr__dot"></div>
</div>
<div>Two</div>
</body>
</html>
Output:
Related
I have 3 rows with text and on hover I want the text on the right side to change and the background color of that text as well. For some reason I can't make it work.
HTML
<div class="container">
<div class="row">
<div class="content">string</div>
<div class="description">A string is a series of characters.</div>
</div>
<div class="row">
<div class="content">number</div>
<div class="description">A number can be written with,or without decimals.</div>
</div>
<div class="row">
<div class="content">boolean</div>
<div class="description">A boolean can be either true or false.</div>
</div>
</div>
JSFiddle link:
see here
The result that I want to get to is this one: enter image description here
After viewing your image description, I edited your code a little bit. Hope it will fulfill your expectation.
I just add a span tag in your description.
and added/modified some CSS.
Change details:
body {
display: flex;
justify-content: center;
}
.container {
font-family: 'Red Hat Mono', monospace;
display: flex;
justify-content: center;
position: relative;
flex-direction: column;
width: 600px;
height: 600px;
}
.row {
display: flex;
background-color: rgb(178, 236, 205);
padding: 10px 0px 10px 15px;
border-radius: 50px;
margin: 15px 15px 15px 20px;
}
.content {
font-size: 1.2em;
flex:1;
font-weight: bold;
}
.description {
display: flex;
justify-content: right;
font-family: 'Lato', 'sans-serif';
color: rgb(189, 132, 27);
font-size: 0.95em;
margin-right: 20px;
font-weight: bold;
}
.row:hover .description{
background-color: rgb(80, 231, 150);
color: red;
margin-right: 0px;
margin-top: -9px;
margin-bottom: -9px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
font-size: 0.95em;
font-family: 'Lato', 'sans-serif';
}
.row:hover .description > span{
margin-top: 9px;
margin-right: 20px;
margin-left: 10px
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght#400;600&display=swap" rel="stylesheet">
<title>Tema 10</title>
<body>
<div class="container">
<div class="row">
<div class="content">string</div>
<div class="description">
<span>A string is a series of characters.</span>
</div>
</div>
<div class="row">
<div class="content">number</div>
<div class="description">
<span>A number can be written with,or without decimals.</span>
</div>
</div>
<div class="row">
<div class="content">boolean</div>
<div class="description">
<span>A boolean can be either true or false.</span>
</div>
</div>
</div>
</body>
</html>
Please update CSS to. You are setting font size 0 that is causing an issue
.row:hover .description {
color: rgb(0, 31, 150);
background-color: rgb(0, 1, 0);
}
I'm looking to add a space between my col's but still have the 3 boxes at 1 row at size 4. I've tried adding margin to.col-style-3 witch ofcause did not work, but push them off position. Also i've tried to add padding, but since i'm using a border, the padding will just push away my border. I've also tried to add col-sm-12 inside my col-sm-4 witch can work, but the transaction works wired then, and i know it's not the right way to do it. Any suggestions on how to fix this issue, i'm not looking for more than 10-15px space between my boxes.
Image of how it does look now:
This is my html:
<div class="row">
#foreach (var Site in Model)
{
<a target="_blank" href="#Site.Url">
<div class="col-sm-4 col-style-3">
<img class="CasinoImage" src="~/Content/Img/#Site.ImageName" />
<h2>#Site.Name</h2>
<hr />
<h3>Denne side tilbyder:</h3>
<span class="OfferStyle">
#Site.Bonuses
</span>
<hr />
<div class="ClickMeBox">Hent din bonus nu</div>
#if (#Site.DepositRequired == true)
{
<span class="DepositStyle">INDBETALING ER NØDVENDIGT</span>
}
else
{
<span class="DepositStyle">INGEN INDBETALING NØDVENDIGT!</span>
}
</div>
</a>
}
</div>
This is my styling:
.col-style-3 {
padding: 0px !important;
background-color: #fff;
border: solid 1px #e0e0e0;
border-radius: 5px;
text-align: center;
color: #000;
transition: 0.5s;
}
.col-style-3 > a {
color: #FFFFFF;
text-decoration: none;
}
.col-style-3:hover {
border: solid 1px #bebebe;
box-shadow: 0 5px 10px #adadad;
transition: 0.3s;
}
I think you just need to make the width 1/3 of the size MINUS padding and spacing.
In the example below, I had a 0.5rem margin around each div. If each div is 33.3%, then they will push out of the 100% container because the margin space still takes up space. So, I did width: calc((33.3%) - 1rem and it. I added an extra 2px for the border.
Check out myCodePen
Note : please use bootstrap css for this
.col-xs-4{padding: 0 15px;}
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src="https://fakeimg.pl/350x200/ff0000/000">
</div>
<div class="col-xs-4">
<img src="https://fakeimg.pl/350x200/ff0000/000">
</div>
<div class="col-xs-4">
<img src="https://fakeimg.pl/350x200/ff0000/000">
</div>
</div>
</div>
I'd recommend making your div.col-sm-4 containers direct children of the div.row with a class of border-0 (removes the border from outer container) and then your div within the anchor tag would look something like <div class="col-style-3 border">. Demo: https://codepen.io/chasewoodford/pen/VwwZaQe
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 30px 0;
padding: 0;
}
.col-style-3 {
padding: 0px !important;
background-color: #fff;
border: solid 1px #e0e0e0;
border-radius: 5px;
text-align: center;
color: #000;
transition: 0.5s;
}
.col-style-3 > a {
color: #FFFFFF;
text-decoration: none;
}
.col-style-3:hover {
border: solid 1px #bebebe;
box-shadow: 0 5px 10px #adadad;
transition: 0.3s;
}
.CasinoImage {
background-color: #024c32;
width: 100%;
height: 244px;
}
a {
text-decoration: none !important;
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.center {
border-bottom: 1px solid #eeeeee;
padding: 15px;
font-size: 25px;
font-weight: 500;
text-align: center;
margin: 0;
}
.Denneside {
border-bottom: 1px solid #eeeeee;
margin: 0;
padding: 20px;
}
.Denneside h3 {
padding: 0;
font-size: 20px;
font-weight: 500;
text-align: center;
margin: 0 0 10px 0;
}
.Denneside span {
padding: 0;
font-size: 16px;
font-weight: 400;
text-align: center;
margin: 0;
}
.ClickMeBox {
background-color: #ff6a00;
padding: 5px;
font-size: 20px;
font-weight: 700;
color: #FFFFFF;
text-align: center;
text-transform: uppercase;
margin: 10px 0 0 0;
}
.Box {
padding: 5px;
font-size: 12px;
font-weight: 400;
text-align: center;
text-transform: uppercase;
margin:0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 border-0">
<a target="_blank" href="#Site.Url">
<div class="col-style-3 border">
<img class="CasinoImage" src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" />
<h2 class="center">Danske Spil</h2>
<div class="Denneside">
<h3>Denne side tilbyder:</h3>
<span class="OfferStyle">100% Indbetaling + 50 FreeSpins</span>
</div>
<div class="ClickMeBox">HENT DIN BOUNUS NU</div>
<div class="Box">INDBETALING ER NODVENDIGT</div>
</div>
</a>
</div>
<div class="col-sm-4 border-0">
<a target="_blank" href="#Site.Url">
<div class="col-style-3 border">
<img class="CasinoImage" src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" />
<h2 class="center">Danske Spil</h2>
<div class="Denneside">
<h3>Denne side tilbyder:</h3>
<span class="OfferStyle">100% Indbetaling + 50 FreeSpins</span>
</div>
<div class="ClickMeBox">HENT DIN BOUNUS NU</div>
<div class="Box">INDBETALING ER NODVENDIGT</div>
</div>
</a>
</div>
<div class="col-sm-4 border-0">
<a target="_blank" href="#Site.Url">
<div class="col-style-3 border">
<img class="CasinoImage" src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" />
<h2 class="center">Danske Spil</h2>
<div class="Denneside">
<h3>Denne side tilbyder:</h3>
<span class="OfferStyle">100% Indbetaling + 50 FreeSpins</span>
</div>
<div class="ClickMeBox">HENT DIN BOUNUS NU</div>
<div class="Box">INDBETALING ER NODVENDIGT</div>
</div>
</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</body>
</html>
I wish to set multiple buttons to equal width in a container. I also wish to get the button to resize when it is in landscape mode or wider screen. How am I able to achieve that?
What I am trying to achieve is as follow
But what I get when I switch it back to Potrait
The code is in JSFiddle JSFiddle Code
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
.card{
border:0px solid;
position:relative;
height:200px;
background:url("https://preview.ibb.co/kJvJ5e/1847p.png") no-repeat top center;
background-size:cover;
}
.card img {
width:100%;
}
.search-box {
position : absolute;
display:inline-block;
bottom:-30px;
left:0;
right:0;
padding:15px;
text-align:center;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
#child{
width:100%;
height: 20px;
margin: auto;
text-align: center;
margin-top: 40px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-checkin{
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
.icon-addon {
position:relative;
}
.icon-addon label {
position: absolute;
left: 2px;
top: 2px;
padding: 8px;
font-size: 20px;
}
.icon-addon input {
height:40px;
padding-left:35px;
}
.currentposition{
position: -webkit-sticky;
position: sticky;
right:20px
}
.wrap {
width: 100%;
height: 50px;
padding-top: 10px;
padding-bottom:10px;
text-align: center;
}
button{
margin-left: 15px;
display: inline-block;
text-align: center;
white-space: nowrap;
color: #000000;
border-color: #B9E5fB;
text-transform: uppercase;
background-color: #B9E5fB;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 10px 10px;
font-size: 13px;
border-radius: 10px;
width:20%;
}
button:first-child{
margin-left: 0;
}
<body id="page-top" style="font-family:Arial">
<div class="card" >
<div class="search-box">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search classes" class="form-control" id="searchBar">
<label for="searchBar" class="glyphicon glyphicon-search" rel="tooltip" title="searchBar"></label>
</div>
</div>
<button class="btn-checkin" style="font-family:Arial">Check in</button>
</div>
</div>
<div id="child">
<div class="container-fluid">
<img src="img/location.png" class="pull-left" style="width:25px;height:20px;padding-left:10px" />
<p class="pull-left" style="padding-left:10px;font-family:Arial">Current Location <b>Sri Petaling</b></p>
</div>
<div class="container-fluid drop-shadow">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/7557.jpg" style="width:104px;height:64px;padding:10px 10px 10px 5px" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h5 class="media-left" style="padding-top:12px;color:#B9E5fB;font-family:Arial" >PERSONAL TRAINING</h5>
<p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Strike Academy Fitness</p>
</div>
</div>
</div>
<div class="container-fluid drop-shadow" style="margin-top:20px">
<div class="container">
<p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Plan your time</p>
</div>
<div class="wrap">
<button>All</button>
<button >Morning</button>
<button >Afternoon</button>
</div>
<div class="wrap">
<button>Evening</button>
<button>Tomorrow</button>
<button>This Week</button>
</div>
</div>
</div>
</body>
Results still not working? Please help
You can use bootstrap grid to achieve your goal. Wrap your buttons inside bootstrap columns as below. This creates columns of equal width and your buttons reside within each columns.
<div class="row">
<div class="col"> <button class="mybtn"> All </button> </div>
<div class="col"> <button class="mybtn">Morning</button> </div>
<div class="col"> <button class="mybtn">Afternoon</button> </div>
</div>
You can add spacing between your buttons by providing a margin:
.mybtn
{
margin:0 5px;
}
Read more Here
Use col-md-4 for medium size devices, col-sm-4 for small devices, col-xs-4 for extra small devices.
Try this link.
http://jsfiddle.net/my5hdu6k/7/
To settle the button the way you want, you need to limit the width of them not exceeding 33.33% of total width in any screen size.For that, you need to use parent row div and wrap each button inside col div as shown in the code below.
<div class="wrap">
<div class="row">
<div class="col">
<button>Button 1</button>
</div>
<div class="col">
<button>Button 2</button>
</div>
<div class="col">
<button>Button 3</button>
</div>
</div>
Then, you have to trick the text to be ellipsis to safe guard the exceeding text for the smaller screen ( this may not be require for your this instance but it is good practice to plan for worst ). Look closely to the changes I made for the .button class in CSS.
.wrap {
width: 250px;
height: 50px;
padding: 25px;
text-align: center;
display: inline-block;
width:100%;
}
.col{padding:0 5px;display:inline-block;width:33.33%;}
.row{margin:0 -5px;} /* Customized the .row class of bootstrap */
button{
margin:5px 0; /* to undo your older style */
width:100%;
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
}
button:first-child{
margin:5px 0; /* to undo your older style */
}
Please check the provided jsfiddle
I have been struggling to make right alignment and responsive. i want to add some of the test on top of the image. i have try changing values in css but it doesnt work out. i want to make as it below:
codepen: codepen link
Please advise. i am new to bootstrap.
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background: white;">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent" >
<div class="circle">1</div>
<div class="expenseItems">Mobile</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent" >
<div class="circle">2</div>
<div class="expenseItems">Select a Product Category</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" >
<img src="http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png" class="tabimg" alt="">
<div class="circle tag" style="background-color:darkblue">3</div>
<div class="expenseItems">Find the latest software, firmware, and drivers<font color="darkblue"></font></div>
</div>
</div>
<div class="col-sm-2">
<div class="parent" >
<div class="circle">4</div>
<div class="expenseItems">Tablet Use</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
.parent {
border: 1px;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: gray;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: gray;
font-size: 24px;
}
.hr {
background: gray;
height: 2px;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 15px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
.tabimg {
padding : 0px 0px 0px 0px;
height: 30px;
width: 100px;
margin-top: 0px;
}
The easiest approach to this would be just setting a background image to the div
in question.
I've added an ID to the div you're trying to add the image to, and I added the following code for that div.
#box-with-image {
background: url(http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png);
background-size: contain;
background-repeat: no-repeat;
/*
OTHER OPTION:
background-size: cover;
*/
}
Full Codepen Link
For sizing, contain will position the image top left, and fill whichever dimension is smallest. cover will fit whichever dimension is largest.
Or in other words, in a non-square shaped div, contain will leave whitespace, while cover will cut some of the image off.
Another approach to this would be using the following CSS on the image
img {
position: relative;
top: 0;
left: 0;
width: 100%;
}
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.