bootstrap row going above another in mobile view in html - html

i have created an html section in bootstrap, which contains a container and two main rows, the code is like below:
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.addonscard {
width: 100%;
height: 181px;
padding: 2%;
border: 1px solid #efefef;
}
.addonsimage {
width: 100%;
}
.add-on-add-unit {
color: #30ac15;
border: 1px solid #30ac15;
}
.add-on-add-unit {
font-size: 14px;
line-height: 20px;
padding: 2px 12px 2px 10px;
border-radius: 10px;
display: inline-block;
}
.add-on-add-unit {
color: #30ac15;
border: 1px solid #30ac15;
}
.addonsdesc {
font-size: 13px
}
#showmore {
text-align: center;
}
.clearme {
clear: both;
margin-top: 2%;
}
</style>
<section class="addons">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="addonscard">
<div class="row">
<div class="col-md-4">
<img class="addonsimage" src="test1.jpg" />
</div>
<div class="col-md-8">
<h4>This is Heading</h4>
<p>Price</p>
+ Add
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="addonscard">
<div class="row">
<div class="col-md-4">
<img class="addonsimage" src="test2.jpg" />
</div>
<div class="col-md-8">
<h4>This is Heading</h4>
<p>Price</p>
+ Add
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
</div>
</div>
</div>
</div>
</div>
<div class="clearme"></div>
<div class="row">
<div class="col-md-10" id="showmore">
+ Show more add-ons
</div>
</div>
</div>
now the problem is
<div class="row">
<div class="col-md-10" id="showmore">
+ Show more add-ons
</div>
</div>
this row is going above the first row in mobile view, i have tried using mobile query to adjust but still its not moving down, can anyone please tell me what could be wrong here, thanks in advance


Remove height (181px) from ".addonscard" class in CSS and try :
.addonscard {
width: 100%;
height: auto; // height is updated from 181px to auto..
padding: 2%;
border: 1px solid #efefef;}


set height for rows and set float right for them!
#media only screen and (max-width: 576px) {
.row{
height:fit-content;
float:right;
}
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.addonscard {
width: 100%;
height: 181px;
padding: 2%;
border: 1px solid #efefef;
}
.addonsimage {
width: 100%;
}
.add-on-add-unit {
color: #30ac15;
border: 1px solid #30ac15;
}
.add-on-add-unit {
font-size: 14px;
line-height: 20px;
padding: 2px 12px 2px 10px;
border-radius: 10px;
display: inline-block;
}
.add-on-add-unit {
color: #30ac15;
border: 1px solid #30ac15;
}
.addonsdesc {
font-size: 13px
}
#showmore {
text-align: center;
}
.clearme {
clear: both;
margin-top: 2%;
}
</style>
<section class="addons">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="addonscard">
<div class="row">
<div class="col-md-4">
<img class="addonsimage" src="test1.jpg" />
</div>
<div class="col-md-8">
<h4>This is Heading</h4>
<p>Price</p>
+ Add
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="addonscard">
<div class="row">
<div class="col-md-4">
<img class="addonsimage" src="test2.jpg" />
</div>
<div class="col-md-8">
<h4>This is Heading</h4>
<p>Price</p>
+ Add
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
</div>
</div>
</div>
</div>
</div>
<div class="clearme"></div>
<div class="row">
<div class="col-md-10" id="showmore">
+ Show more add-ons
</div>
</div>
</div>

Related

Div's content not being contained and is overlapping (Bootstrap, Css, MVC)

I Currently am designing a login page in mvc and I want to seperate certain elements so they can be styled correctly. However when I create div's inside other divs they do not stick to the outer div's height and therefore move all around the page. I will give you a sample with my code.
In my Layout.cshtml page I've got
<div class="login-box-outer">
<div class="container">
<div class="login-box">
<div class="login-logo">
<a href="example" </b> Example</a>
</div>
#RenderBody()
</div>
</div>
</div>
In my register page I have the following
.form-control{
height: 35px;
}
.login-logo{
display: none;
}
.login-box, .register-box {
width: 500px;
margin: 2% auto;
}
.text-danger {
color: #a94442;
}
.login-page, .register-page {
background: url('https://example.jpg');
background-position: center;
background-size: cover;
}
##media(max-width: 400px)
{
.login-box, .register-box {
width: 300px;
margin: 4% auto;
}
}
.intl-tel-input{
display: block !important;
}
.join-section__shadow {
left:10%;
bottom:35%;
position: absolute;
padding: 96px 0 48px;
}
.join-content-layout {
background-color: transparent;
padding: 0;
max-width: 1110px;
margin: 0 auto;
position: relative;
color:white;
}
.join-xlarge {
font-size: 38px;
line-height: 44px;
font-weight: 800;
text-shadow: 0 0 3px rgba(0,0,0,.3);
}
.join-medium {
font-size: 24px;
margin-top: 10px;
font-weight: 500;
text-shadow: 0 0 1px rgba(0,0,0,.5);
}
.content-frame.purple2-bg {
background: #fff;
}
.container-fluid.support-block {
padding-top: 30px;
padding-bottom: 30px;
}
.support-block a {
text-decoration: none;
}
</style>
still in the register page here is my html
<div class="container-fluid support-block">
<div class="join-section__shadow">
<div class="join-content-layout">
<div class="col-md-12 col-sm-12">
<h1 class="join-xlarge join-headline join-h1">
Example
</h1>
<h3 class="join-medium join-h3">
Example
</h3>
</div>
</div>
</div>
<div class="col-xs-10 col-xs-push-10 noPadding" style="bottom:100px;">
<form asp-controller="Account" asp-action="Register" asp-route-returnurl="#ViewBag.ReturnUrl" method="post" role="form">
#Html.AntiForgeryToken()
<div class="box box-primary col-xs-12 boxShadow" style="border:none;margin-bottom:10px;">
<div class="form-group has-feedback col-xs-12 noPadding">
<label>Name</label>
<input asp-for="#Model.FullName" value="#Model.FullName" class="form-control" />
<span asp-validation-for="#Model.FullName" class="text-danger"></span>
</div>
</form>
</div>
</div>
<div class="container-fluid">
<div class="content-frame purple2-bg">
<div class="container-fluid support-block">
<div class="row icon-row">
<div class="col-md-4">
<i class="fa fa-tag" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-thumbs-up" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-money" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
</div>
</div>
</div>
</div>
However, under the form I want a complete new section but the content from the form and everything else seems to just float about on the page! Anybody know why this is happening?
Here is how it looks in the browser
This container should be taking up the full width of the screen but it's just floating around. Any idea as to why this is happening?

Vertically aligning div using CSS and Bootstrap?

I am trying to build a simple survey with 10 questions which are stored in my database, looped through and the 10 questions are added to the page dynamically. Basically, I would like there to only be one question on the page at a time, but the page to be scrollable to see the other questions.
For example, question 1 would show up in the middle of the page, the user types their answer and clicks next, and the page scrolls to the next question. If the user scrolls up, it scrolls through the page up, and down scrolls down. For jumping to the next question I was planning on just having each question with an id and the next button just having a link to that id.
My HTML for populating the questions on the page looks like this:
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
My CSS for the above looks like this:
.question {
color: #232A33;
text-align: left;
font-size: 2em;
}
.description {
color: #FFCD3D;
text-align: left;
font-size: 1.25em;
}
.answer {
color: #232A33;
text-align: left;
font-size: 1.25em;
}
I managed to get the question centered on the page using the following code:
.wrapper {
width: 500px;
height: 150px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
This works fine for one question, but if there are multiple questions they all overlap each other because the position is absolute.
Any tips on how I can achieve this design for the page?
Thanks in advance!

You're very close. This can be done by adding just a tad more css in (adjusting the row class slightly).
If you add the following:
.row {
width: 100%;
margin: 15% auto;
height: 100vh!important;
}
and adjust your wrapper to **relative** positioning, you should see a good result
.wrapper {
width: 500px;
height: auto;
position: relative;
}
See snippet or fiddle
.question {
color: #232A33;
text-align: left;
font-size: 2em;
}
.description {
color: #FFCD3D;
text-align: left;
font-size: 1.25em;
}
.answer {
color: #232A33;
text-align: left;
font-size: 1.25em;
}
.row {
width: 100%;
margin: 15% auto;
height: 100vh!important;
}
.wrapper {
width: 500px;
height: auto;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>

How to place div in second row directly under div in first row with same column size but blocked by the height of another column in first row

Sorry if the title is confusing. I have included a screenshot of my issue to make it more clear.
Essentially, I want the green-bordered div to be directly underneath the red-bordered div without the blue-bordered div interfering.
Here is my HTML code (I am using Bootstrap v3.3.7)
<div class="container appParent">
<div class="row">
<div class="col-md-6" id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div class="col-md-6" id="songs-added">
<app-songs-added></app-songs-added>
</div>
</div>
<div class="row">
<div class="col-md-6" id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
</div>
My CSS is only putting the borders around the div. Everything else is bootstrap.
#song-view{
border: 2px solid red;
}
#songs-added{
border: 2px solid blue;
}
#playlist-form{
border: 2px solid green;
}

In this case, use pull-right, and keep all of the col- in a single row.
<div class="container appParent">
<div class="row">
<div class="col-md-6" id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div class="col-md-6 pull-right col-xs-12" id="songs-added">
<app-songs-added></app-songs-added>
</div>
<div class="col-md-6" id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
</div>
http://www.codeply.com/go/189ofQG5Sj

You can re-arrange your HTML.
#song-view {
border: 2px solid red;
height: 100px;
margin-bottom: 30px;
}
#songs-added {
border: 2px solid blue;
height: 150px;
}
#playlist-form {
border: 2px solid green;
height: 100px;
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container appParent">
<div class="row">
<div class="col-md-6">
<div id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
<div class="col-md-6">
<div id="songs-added">
<app-songs-added></app-songs-added>
</div>
</div>
</div>
</div>

You can simple use min-heights and surround the containers and rows with a div for extra styling. You can check this example I quickly made: JsFiddle
<div class="song-list">
<div class="row">
<div class="container">
<div class="col-md-6" id="song-view">
Song View
</div>
<div class="col-md-6" id="songs-added">
Songs Added
</div>
</div>
</div>
</div>
<div class="playlist">
<div class="row">
<div class="container">
<div class="col-md-6" id="playlist-form">
Playlist Form
</div>
</div>
</div>
</div>
CSS:
.song-list #song-view {
border:1px solid blue;
min-height:300px;
}
.song-list #songs-added {
border:1px solid red;
min-height:500px;
}
.playlist #playlist-form {
border:1px solid green;
}

Adding a margin between two bootstrap columns makes them stack on top of each other

I have two bootstrap columns, side by side, but when I add a margin to separate them then the columns stack on top of each other. I am using the Mixed: mobile, tablet, and desktop grid template for my two columns, and I'm not sure whether this is the cause.
#antGame { // container
height: 60%;
position: relative;
background-color: #fff;
border: 1px solid grey;
padding: 0 !important;
}
#stimuliContainer {
height: 40%;
}
#stimuli {
width: 100%;
max-height: 100%;
}
#errorMsg {
height: 20%;
width: 100%;
}
#antInstruct {
height: 60%;
background-color: #fff;
border: 1px solid grey;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8" id="antGame">
<div id="stimuliContainer">
<img id="stimuli" src="images/ant/cues/blank.png">
</div>
<div class="col-xs-12 col-sm-6 col-lg-8" id="errorMsg">
<span>Error Message</span>
</div>
</div>
<div class="col-xs-6 col-lg-4" id="antInstruct">
<h4>Instructions</h4>
<span>Hi</span>
</div>
</div>
</div>

I don't recommend to override the padding of the Bootstrap columns, because it can break the responsive, but you know, sometimes you are forced to do it.
In that case the most clean way you can do, is add a custom class .padding-2, that overrides the Boostrap padding but don't destroy the responsive.
HTML
<div class="container">
<div class="row">
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: red;">
1 col
</div>
</div>
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: blue;">
2 col
</div>
</div>
</div>
</div>
CSS
.padding-2 {
padding-left: 2px;
padding-right: 2px;
}
Demo: http://www.bootply.com/eO033QYCn3

Try to use padding instead of margin, and then, if you want to have for example border, you can add another element inside this one with padding.
Here's an example:
<div class="container">
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
1 col
</div>
</div>
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
2 col
</div>
</div>
</div>
And demo:
https://plnkr.co/edit/5fCMTJMJWPALk3W45t1i?p=preview

div table column width doesn't match rows

Spending way too much time on (what should be) a simple div table. PROBLEM: the column headers will not resize to the width of the table, or the rows. The rows appear okay, but the column headers don't.
Trying to avoid having fixed widths as the next table I post may have a different number of columns. With the following code the column headers are all scrunched to the left, next to each other, but they don't match the rows...
<style type="text/css">
.table-container {
display: table;
width: 50%;
table-layout: fixed;
border-collapse: collapse;
}
.table-heading {
font-weight: bold;
display: table-caption;
background-color: #e9e9e9;
text-align: center;
padding: 8px;
line-height: 21px;
font-size: 18px;
color: #CA8327;
}
.table-row {
display: table-row;
text-align: center;
}
.table-row-shade {
display: table-row;
text-align: center;
background-color: #e9e9e9;
}
.table-col {
display: table-cell;
text-align: center;
border: 1px solid #ca8327;
}
</style>
<div class="table-container">
<div class="table-heading">Approximate Dimensions (inches)</div>
<div class="table-col">
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>
<div class="table-row-shade">
<div class="table-col">XXS</div>
<div class="table-col">3-9 inches</div>
<div class="table-col">2-3 inches</div>
<div class="table-col">< 5 lbs*</div>
</div>
<div class="table-row">
<div class="table-col">XS</div>
<div class="table-col">5-13 inches</div>
<div class="table-col">3-7 inches</div>
<div class="table-col">5 - 10lbs*</div>
</div>
</div>
http://jsfiddle.net/Speedy1/t3e3ken6/

You only put table-col rather than table-row
<div class="table-container">
<div class="table-heading">Approximate Dimensions (inches)</div>
<div class="table-row"> <!-- must be a table-row -->
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>
<div class="table-row-shade">
<div class="table-col">XXS</div>
<div class="table-col">3-9 inches</div>
<div class="table-col">2-3 inches</div>
<div class="table-col">< 5 lbs*</div>
</div>
<div class="table-row">
<div class="table-col">XS</div>
<div class="table-col">5-13 inches</div>
<div class="table-col">3-7 inches</div>
<div class="table-col">5 - 10lbs*</div>
</div>
</div>
http://jsfiddle.net/vgjb578s/

Try this http://jsfiddle.net/t3e3ken6/1/
It's because you have put the class "table-col" next to your heading. Change it to "table-row" and the problem is solved.
<div class="table-row">
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>