I'm trying to center a row with dynamic number of cols. I can't set margins equal to both sides using Bootstrap row and col. I can center it if I use ul and li, but when the number of "Cards" does not occupy the whole row space, the items in that row are center aligned -- I want them to be left aligned. Follow my code
#font-face {
font-family: 'Hind';
src: url("../fonts/Hind/Hind-Regular.ttf"); }
body, nav, header, div, footer, section {
margin: 0px;
padding: 0px; }
body {
overflow: hidden;
background-color: #2F2E33;
font-family: "Hind"; }
header {
position: fixed;
top: 0;
right: 0;
left: 0;
min-height: 50px;
max-height: 90px; }
header .main-bar {
margin: 0px;
padding: 0px;
background-color: #2F2E33;
height: 50px; }
header .main-bar h1 {
padding: 0px;
margin: 0px;
color: #D7B135; }
header .main-menu {
height: 40px;
background-color: #D7B135; }
header .main-menu .inline-navbar {
margin: 0px;
padding: 0px;
height: 40px;
text-align: center; }
header .main-menu .inline-navbar li {
display: block;
float: left;
height: 40px;
padding: 0px 20px 0px 20px;
width: 20%;
line-height: 40px;
color: #FFFFFF;
cursor: pointer;
-webkit-transition: 0.2s;
transition: 0.2s; }
header .main-menu .inline-navbar li:hover {
background-color: #2F2E33;
color: #D7B135; }
#media screen and (max-width: 768px) {
.main-bar {
background-color: #D7B135; }
.main-bar h1 {
color: #2F2E33; } }
.profile-cardrow {
width: 100%;
display: block;
text-align: center; }
.profile-cardrow .profile-card {
vertical-align: top;
height: 30.0rem;
background-color: white;
margin: 20px;
padding: 0px;
min-width: 25.0rem;
max-width: 25.0rem; }
.profile-card {
height: 30.0rem;
background-color: white;
margin: 20px;
padding: 0px;
min-width: 25.0rem;
max-width: 25.0rem; }
.profile-list {
text-align: center;
padding: 0px; }
.profile-list .profile-item {
padding: 0px;
display: inline-block; }
.profile-list .profile-item .profile-card {
margin: 20px;
height: 30.0rem;
background-color: white;
min-width: 25.0rem;
max-width: 25.0rem;
padding: 0px; }
footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
min-height: 50px;
background-color: #2F2E33; }
.top-navbar {
background-color: #2F2E33;
margin: 0px;
padding: 0px;
border-style: none;
border-radius: 0px; }
.main-content {
position: fixed;
width: 100%;
bottom: 50px;
top: 90px;
overflow-y: scroll; }
<body>
<section>
<header>
<div class="main-bar">
<h1>pros</h1>
</div>
<nav class="main-menu">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<ul class="inline-navbar">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
</div>
</nav>
</header>
</section>
<section>
<div class="main-content">
<!--<div class="container-fluid">
<div class="row">
<div class="list-group">
<div class="col-xs-12 col-sm-6 col-med-4 col-lg-2 profile-card"></div>
<div class="col-xs-12 col-sm-6 col-med-4 col-lg-2 profile-card"></div>
<div class="col-xs-12 col-sm-6 col-med-4 col-lg-2 profile-card"></div>
<div class="col-xs-12 col-sm-6 col-med-4 col-lg-2 profile-card"></div>
<div class="col-xs-12 col-sm-6 col-med-4 col-lg-2 profile-card"></div>
<div class="col-xs-12 col-sm-6 col-med-4 col-lg-2 profile-card"></div>
<div class="col-xs-12 col-sm-6 col-med-4 col-lg-2 profile-card"></div>
<div class="col-xs-12 col-sm-6 col-med-4 col-lg-2 profile-card"></div>
<div class="col-xs-12 col-sm-6 col-med-4 col-lg-2 profile-card"></div>
<div class="col-xs-12 col-sm-6 col-med-4 col-lg-2 profile-card"></div>
</div>
</div>
</div>-->
<!--<div class="row profile-cardrow">
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 profile-card"></div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 profile-card"></div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 profile-card"></div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 profile-card"></div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 profile-card"></div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 profile-card"></div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 profile-card"></div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 profile-card"></div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 profile-card"></div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 profile-card"></div>
</div>-->
<ul class="profile-list">
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
<li class="profile-item"><div class="profile-card"></div></li>
</ul>
</div>
</section>
<section>
<footer>
<div></div>
</footer>
</section>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
That's the way it is now:
That's the way i want, but with equals margins om both sides
Related
Achieved
Want
as seen in the first picture the items are not properly aligned how can it be aligned like on the second picture? Here's the code I tried. Vertical-align attribute also doesn't seem to work, or may be i used it wrong.
.features{
background-color: #0375b4;
padding:40px 100px;
float: left;
width: 100%;
}
.features img{
width: auto;
}
.features-content{
text-align: center;
width: 100%;
display: inline-block;
margin:0 auto;
}
.features-content h1{
font-size: 24px;
color: #ffffff;
text-transform: uppercase;
margin-top: 10px;
}
<div class="features">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="features-content">
<img src="images/compass.png" alt="Compass Logo">
<h1>Adventure</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="features-content">
<img src="images/tube.png" alt="Compass Logo">
<h1>Fun & Safety</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="features-content">
<img src="images/diamond.png" alt="Compass Logo">
<h1>Impeccable Service</h1>
</div>
</div>
</div>
</div>
</div>
The problem is that your uploaded images are not the same height.
A. Make them the same either with CSS either before uploading them
See below example with changing height with css ( i changed the class col-xs-12 to col-xs-4 for example purposes only, so they will be 3 in row in the snippet )
.features {
background-color: #0375b4;
padding: 40px 100px;
float: left;
width: 100%;
}
.features img {
width: auto;
}
.features-content {
text-align: center;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.features-content h1 {
font-size: 24px;
color: #ffffff;
text-transform: uppercase;
margin-top: 10px;
}
.features-content img{
height:150px;
width:auto;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="features">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x150" alt="Compass Logo">
<h1>Adventure</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x250" alt="Compass Logo">
<h1>Fun & Safety</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x200" alt="Compass Logo">
<h1>Impeccable Service</h1>
</div>
</div>
</div>
</div>
</div>
B. Or you can make the cols same height an position the text absolutely at the bottom if you don't want to change the height of the images ( if you want your images to have different heights )
.features {
background-color: #0375b4;
padding: 40px 100px;
float: left;
width: 100%;
}
.features img {
width: auto;
max-width:100%;
}
.features-content {
text-align: center;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.features-content h1 {
font-size: 24px;
color: #ffffff;
text-transform: uppercase;
margin-top: 10px;
}
.features .row {
display: flex;
flex-wrap: wrap;
}
.features .row > div {
position: relative;
padding-bottom: 60px;
border: 1px solid green;
/*for visual example*/
}
.features .row > div h1 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="features">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x150" alt="Compass Logo">
<h1>Adventure</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x250" alt="Compass Logo">
<h1>Fun & Safety</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x200" alt="Compass Logo">
<h1>Impeccable Service</h1>
</div>
</div>
</div>
</div>
</div>
C. The least 'clean' solution would be to add specific padding-bottom or margin-bottom to the images until the h1 are aligned. ( same with margin-top or padding-top to the h1 )
.features {
background-color: #0375b4;
padding: 40px 100px;
float: left;
width: 100%;
}
.features img {
width: auto;
max-width: 100%
}
.features-content {
text-align: center;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.features-content h1 {
font-size: 24px;
color: #ffffff;
text-transform: uppercase;
margin-top: 10px;
}
.features .col-md-4:first-child img {
padding-bottom: 100px;
}
.features .col-md-4:last-child img {
padding-bottom: 50px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="features">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x150" alt="Compass Logo">
<h1>Adventure</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x250" alt="Compass Logo">
<h1>Fun & Safety</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x200" alt="Compass Logo">
<h1>Impeccable Service</h1>
</div>
</div>
</div>
</div>
</div>
I coded the first part of my page but when I try to go further down the elements don't go below but on existing elements. The page has a huge picture all over it with some text, but I want to put other text below the picture not on it.
.content {
text-align: center;
margin-top: 15%;
color: #fff;
}
h1 {
font-size: 80px;
font-weight: 700;
color: #fff;
}
.under {
font-size: 30px;
margin-top: 15px;
}
.button {
margin-top: 15%;
font-size: 25px;
}
.fa {
font-size: 80px;
}
.button {
padding: 20px 10px;
background-color: orange;
border-radius: 15px;
}
body {
background-image: url(https://source.unsplash.com/bmnuRawqdsI);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
html {
width: 100%;
height: 100%;
}
.body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 48, 56, 0.5);
background: rgba(44, 48, 56, 0.5);
color: rgba(44, 48, 56, 0.5);
}
<div class="body">
<div class="container">
<div class="content">
<i class="fa fa-coffee" aria-hidden="true"></i>
<h1>You Order. We Deliver.</h1>
<p class="under">Get Coffee In 3 Easy Steps.</p>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-0">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p class="button">Order A Coffee</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-0">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>How It Works.</h1>
<div class="row">
<div class="col-lg-4 col-md4 col-sm-4 col-xs-12">
<p>Order any coffee from one of our many brands.</p>
</div>
<div class="col-lg-4 col-md4 col-sm-4 col-xs-12">
</div>
<div class="col-lg-4 col-md4 col-sm-4 col-xs-12">
</div>
</div>
</div>
I am making a progress step tracker, like the type you'd see in multi-page forms, using CSS and Bootstrap and I am having issues with it scaling down to different screen sizes.
When I move to certain smaller screen sizes, I am having issues with the bars between the steps moving further left then their steps.
My markdown:
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-ls-offset-3">
<div class="work-order-progress">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center first-item">
<span class="step-number">1</span>
<span class="step-name">Initial Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">2</span>
<span class="step-name">Work In Progress</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">3</span>
<span class="step-name">Final Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">4</span>
<span class="step-name">Complete</span>
</div>
</div>
</div>
</div>
And my style sheet:
.work-order-progress {
.div {
margin-right: 75px;
vertical-align: top;
display: inline-block;
text-align: center;
font-weight: bold;
}
.step-number {
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
display: inline-block;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
:not(.first-item) {
.step-number:before {
width: 85%;
height: 5px;
content: '';
position: absolute;
top: 10px;
left: -87px;
z-index: -1;
border-radius: 25px
}
}
.step-name {
display: block;
color: #a5a5a5;
font-weight: bold;
}
.fill {
.step-number {
color: #ffffff;
background: #22a925;
}
.step-number:before {
background-color: #22a925;
}
}
:not(.fill) {
.step-number {
color: #a5a5a5;
background: #ededed;
border: 1px solid;
}
.step-number:before {
background-color: #ededed;
}
}
}
I am conditionally adding the class that makes it active based on business logic, which is removed in this example.
I built a live demo here:
.work-order-progress .div {
margin-right: 75px;
vertical-align: top;
display: inline-block;
text-align: center;
font-weight: bold;
}
.work-order-progress>div{
}
.work-order-progress .step-number {
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
display: inline-block;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
.work-order-progress :not(.first-item) .step-number:before {
width: calc(100% - 35px);
height: 5px;
content: '';
position: absolute;
top: 10px;
left: calc(-50% + 15px);
z-index: -1;
border-radius: 25px;
}
.work-order-progress .step-name {
display: block;
color: #a5a5a5;
font-weight: bold;
}
.work-order-progress .fill .step-number {
color: #ffffff;
background: #22a925;
}
.work-order-progress .fill .step-number:before {
background-color: #22a925;
}
.work-order-progress :not(.fill) .step-number {
color: #a5a5a5;
background: #ededed;
border: 1px solid;
}
.work-order-progress :not(.fill) .step-number:before {
background-color: #ededed;
}
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-ls-offset-3">
<div class="work-order-progress">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center first-item">
<span class="step-number">1</span>
<span class="step-name">Initial Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">2</span>
<span class="step-name">Work In Progress</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">3</span>
<span class="step-name">Final Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">4</span>
<span class="step-name">Complete</span>
</div>
</div>
</div>
</div>
The Above image shows this is how i want to make it.I have alignment display issue and line doesn't gets displayed. how can i achieve using with bootstrap grid.I want it make responsive. please advise where i am making mistake and how can i make it happen.
plunker link
I wan to see like this
<div class="container-fluid" style="background: white;">
<div class="row">
<div class="col-lg-9 col-xs-12 ">
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">1</div>
<div class="expenseItems col-md-1 col-xs-1">Text1</div>
<div class="hrcol-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">2</div>
<div class="expenseItems col-md-2 col-xs-2">Text2</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">3</div>
<div class="expenseItems col-md-2 col-xs-2">Text3</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">4</div>
<div class="expenseItems col-md-2 col-xs-2">Text4</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
</div>
</div>
CSS
/*For drawing line*/
.hr {
color: gray;
background: gray;
width: 5px;
height: 1px;
margin-top:4px;
}
.circle
{
width: 28%;
border-radius: 100%;
text-align: center;
font-size: 14pt;
padding: 1pt;
position: relative;
background: gray;
color: white;
margin-top:11pt;
}
/*Parent div*/
.parent {
border-style: dashed;
border-width: 1px;
padding: 25px;
display:inline-block;
background-color:Aqua;
}
.child {
float: left;
background-color:Orange;
}
.expenseItems {
display: inline-block;
background-color:Green;
}
Using columns to acheive alignment inside other columns doesn't really make much sense when you can simply use a display property to do this with the content inside a column.
Use display: inline-block and remove all the nested columns.
Working Example: Open at FullPage
/*Use this rule below adjust the space between columns*/
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
/*Use the above to adjust the space between columns*/
.parent {
border: 1px dashed red;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: red;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: red;
}
.hr {
background: red;
height: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
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