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.
Related
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:
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 have the following snippet
.striped {
height : 30px;
margin-right: 1px !important;
background: repeating-linear-gradient(-45deg,#E4003D,#E4003D 10px,#222 10px,#222 20px)!important;
}
.content{
height : 100%;
}
.mymedia {
font-size: 1.5vh !important;
color: #fff;
text-align: justify;
-ms-text-justify: inter-word;
text-justify: inter-word;
border-color: #E4003D;
font-weight: normal !important;
background-color:#363636 !important;
background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
}
.rightpadding{
margin-right: 1px !important;
}
.top-buffer {
margin-top:13px;
overflow: hidden;
}
.bottom {
vertical-align: bottom;
bottom: 0 !important;
}
.nolrpadding{
padding-left: 0 !important;
padding-right: 0 !important;
}
.mymedia > p {
margin-left: 5vw !important;
margin-right: 5vw !important;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.square-box{
position: relative;
width: 95%;
overflow: hidden;
font-size: 2vh !important;
font-weight: bold !important;
background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
.noRightMargin {
margin-right: 0 !important;
}
.noLeftMargin {
margin-left: 0 !important;
}
.row [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row{
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:5%; margin-bottom: 10px;">
</div>
<div class="row">
<div class="col-xs-5">
<!-- <div class="row rightpadding"> -->
<div class="row striped"></div>
<div class="row rightpadding">
<div class="media mymedia">
<img src="images/Mission/cluster.png" class="img-responsive">
<p>
asas
</p>
</div>
</div>
<div class="row striped bottom"></div>
<!-- </div> -->
</div>
<div class="col-xs-7">
<div class="row noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://sky.esa.int/" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="https://twitter.com/ESAscience" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="#" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
</div>
<div class="row top-buffer noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://helioviewer.org/" data-internal="true">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3"></div> -->
</div>
</div>
</html>
the problem that I have is the bottom alignments in the two columns, as shown in the image
I have seen fixes for column vertical alignments but it seems that they do not work here, so how can I align the bottom of the three rows within the first column with the next column?
thanks in advance,
es.
UPDATE
I would like it to look something like this with the bottom strip row being vertically aligned with the bottom of the red box.
managed to do what you wanted with just a little jq . hope you don't mind
check here jsfiddle
css code added : .mymedia { height:100%;}
jq code added :
var result = $(".col-xs-7").height() - $(".row.striped").height()*2
$(".row.rightpadding").height(result)
result = height of the right col - the heights of both striped rows ( which are equal i presume )
then add that height to the middle row ( .row.rightpadding )
let me know if it helps.
You should be able to achieve what you want by using absolute positioning, with fixed top and bottom so that the left column elements are "snapped" to the height of the row.
Try the snippet below.
.striped {
height: 30px;
background: repeating-linear-gradient(-45deg, #E4003D, #E4003D 10px, #222 10px, #222 20px)!important;
position: absolute;
left: 0;
right: 15px;
}
.content {
height: 100%;
}
.mymedia {
font-size: 1.5vh !important;
color: #fff;
text-align: justify;
-ms-text-justify: inter-word;
text-justify: inter-word;
border-color: #E4003D;
font-weight: normal !important;
background-color: #363636 !important;
background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
top: 30px;
bottom: 30px;
left: 0;
right: 15px;
position: absolute;
margin-top: 0 !important;
}
.top-buffer {
margin-top: 13px;
overflow: hidden;
}
.bottom {
bottom: 0 !important;
}
.nolrpadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.mymedia > p {
margin-left: 5vw !important;
margin-right: 5vw !important;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.square-box {
position: relative;
width: 95%;
overflow: hidden;
font-size: 2vh !important;
font-weight: bold !important;
background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before {
content: "";
display: block;
padding-top: 100%;
}
.square-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
.noRightMargin {
margin-right: 0 !important;
}
.noLeftMargin {
margin-left: 0 !important;
}
.row {
overflow: hidden;
position: relative;
}
.myLeftCol {
bottom: 0;
padding-left: 0 !important;
position: absolute !important;
top: 0;
}
.myRightCol {
margin-left: 41.6667%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:5%; margin-bottom: 10px;">
</div>
<div class="row">
<div class="col-xs-5 myLeftCol">
<div class="striped"></div>
<div class="media mymedia">
<img src="images/Mission/cluster.png" class="img-responsive">
<p>
asas
</p>
</div>
<div class="striped bottom"></div>
</div>
<div class="col-xs-7 myRightCol">
<div class="row noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://sky.esa.int/" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="https://twitter.com/ESAscience" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="#" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row top-buffer noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://helioviewer.org/" data-internal="true">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3"></div> -->
</div>
</div>
</html>
Wrap everything in a <div>, and set the childs to have min-height: 100%
I am experiencing a problem on bootstrap columns on extra small devices. In extra small devices the bootstrap columns overflow and changes the alignment.
I am attaching screenshots from extra small device and other device.
Screenshot of extra small device:
Screenshot of other device(working fine):
Below code is the bootstrap code.
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="manu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="header row">
<div class="time_remain col-sm-6 col-xs-6 col-md-6 col-ld-6">00 Min 00 Sec</div>
<div class="logout col-sm-6 col-xs-6 col-md-6 col-ld-6">Logout</div>
</div>
<div class="row frame">
<div class="col-sm-9 col-xs-9 col-md-9 col-ld-9 question_wrapper">
<div class="row questions">
1. This is first one?
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
A
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
First
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
B
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Second
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
C
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Third
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
D
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Fourth
</div>
</div>
</div>
<div class="col-sm-3 col-xs-3 col-md-3 col-ld-3 question_status_wrapper">.col-sm-3</div>
</div>
<div class="row status_bar">
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>00 MIN 00 SEC</div> </div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Back</div></div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Next</div></div>
<div class="col-sm-0 col-xs-0 col-md-6 col-ld-6 "></div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Submit</div></div>
</div>
</div>
</body>
</html>
The css code is given below.
.frame
{
height: 70vh;
}
.question_wrapper
{
height: inherit;
background-color: beige;
overflow: auto;
padding-left: 20px;
padding-right: 20px;
}
.time_remain
{
padding-top: 5px;
color: white;
text-align: left;
padding-left: 20px;
}
.logout
{
color: white;
text-align: right;
padding-right: 20px;
padding-top: 5px;
}
.question_status_wrapper
{
height: inherit;
background-color: bisque;
overflow: auto;
}
.header
{
height: 10vh;
background-color: #333333;
color: white;
}
.status_bar
{
position: fixed;
bottom: 0;
width: 100%;
height: 20vh;
background-color : #333333;
display: flex;
}
.questions
{
margin-top: 20px;
margin-left: 20px;
}
.answer_choice_label_div
{
background-color: black;
color: white;
text-align: center;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
}
.answer_choice_div
{
background-color: white;
color: black;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
overflow: inherit;
}
.answer_choice_div:hover
{
background-color: #C6FFF1;
color: black;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
overflow: inherit;
}
.choice_label_choice
{
margin-top: 10px;
margin-bottom: 10px;
min-height: 10vh;
height: 50px;
vertical-align: middle;
}
.time_bar
{
background-color: aliceblue;
color: black;
align-self: center;
text-align: center;
margin-left: 10px;
min-height: 6vh;
display: inline;
vertical-align: middle;
margin-right: 10px;
padding-top: 7px;
}
I have checked the bootstrap grid and didn't find any problem. Please help.
Use media queries , Paste this code in your style.css
#media only screen and (max-width: 580px)
{
.answer_choice_div
{
width: 83%;
}
.answer_choice_label_div
{
width: 10%;
}
}
Use xs for extra small devices. sm for small devices and md for medium devices.
Follow this link for Grid Options
Grid Options - Bootstrap
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.