How to make a div span two rows (only on mobile layout)? - html

I have a responsive web layout based on bootstrap. I have Glyphs, titles and text. These are my two layouts:
[1A] [1B] [1C]
[2A] [2B] [2C]
[3A] [3B] [3C]
This is the layout for small screens.
[1A] [2A]
[3A]
[1B] [2B]
[3B]
[1C] [2C]
[3C]
This code makes the first layout, but how do I achieve the second responsively?
EDIT:
I have this:
From this code:
CSS:
.green-box {
background: #3DBEAF;
border: 5px solid #e7e7e7;
border-radius: 20px;
margin-top: 10%;
margin-bottom: 10%;
padding-top: 10px;
padding-bottom: 15px;
margin-left: 2.77778%
}
#media (max-width: 769px) {
.mob-hide{
display: none;
}
.green-box{
margin-left: 20px;
margin-right: 20px;
vertical-align: middle;
}
}
HTML:
<div class="container text-center">
<div class="col-xs-12 col-sm-3 green-box eqheight1">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered" /></div>
<div class="col-xs-9 col-sm-12">
<h3>Revolutionary</h3>
</div>
<div class="col-xs-9 col-sm-12">
<p class>Knowing when to change a gas bottle isn't always easy so many people buy a back-up or risk running out unexpectedly is a real pain - it might leave you cold or with hungry in-laws, either way it will spoil your day. Meet Gas-Sense!</p>
</div>
</div>
<div class="col-sm-1 margin mob-hide"></div>
<!-- Other two boxes -->
</div
How do I get the glyph on the left, and centered in the middle vertically of the title text block?

Just going off your diagram:
<div class="container">
<div class="col-sm-12 col-md-4">
<div class="col-sm-3 col-md-12">The X icon in the diagram</div>
<div class="col-sm-9 col-md-12">
The article text
</div>
</div>
</div>

You need group each icon, text and heading together, then add some classes for col-xs-*:
http://codepen.io/anon/pen/RreRrN
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="col-xs-3 col-sm-12">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn"/></div>
</div>
<div class="col-xs-9 col-sm-12">
<h2>Title 1</h2>
<p>Text 1</p>
</div>
</div>
<div class="col-sm-4">
<div class="col-xs-3 col-sm-12">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok"/></div>
</div>
<div class="col-xs-9 col-sm-12">
<h2>Title 2</h2>
<p>Text 2</p>
</div>
</div>
<div class="col-sm-4">
<div class="col-xs-3 col-sm-12">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone"/></div>
</div>
<div class="col-xs-9 col-sm-12">
<h2>Title 3</h2>
<p>Text 3</p>
</div>
</div>
</div>
</div>

Related

Bootstrap 4 big margin in parent container

Okay, this is my 3rd question and hopefully the last one. I get some problems with my page layout that looked like this before:
[navbar]
[1][2][3]
I wanted to achieve this effect when resizing:
[navbar]
[2][3]
[1]
(1st div under the 3rd one)
However, when I use (in the main container that holds all the 3 divs) class container mt-3 I get this layout:
[navbar]
[1][2]
[3]
Now, when I change the margin-left of the 3rd div it doesn't go up to the top row but just moves to the left - something happens like it would be in another row class.
When I use parent-container container mt-3
[navbar]
[1][2] [3]
And they are really small and I can't change the width no matter what I do. I even tried changing the bootstrap's "container" class with both px and %.
container-fluid does the job a bit because all the divs are bigger (and on 100% width of the page) but I would want to have it just like 90%, but still, the [3] div is on the right side mile from the [2]. When I resize the window, the [2] div goes in this white space between [1] and [3] under the [3]. So it looks similar to this:
[navbar]
[2] [3]
[1]
CSS CODE:
.main{
background-color: red;
box-shadow: 3px 3px 20px #000000;
border-radius: 20px;
}
.left{
background-color: green;
max-width: 200px;
border-radius: 20px;
}
.right{
background-color: blue;
max-width: 200px;
border-radius: 20px;
}
.parent-container {
display: flex;
}
.right-content{
width: 100%;
text-align: center;
float: center;
margin-top: 10px;
}
HTML
<div class="parent-container container mt-3">
<div class="row">
<div class="left col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0">
<div class="col-12 text-center" style="margin-bottom: 15px">
<h3>TITLE LEFT</h3>
</div>
</div>
<div class=" col-8 col-lg-6">
<div class="container card">
<div class="card-body">
<div class="row">
<div class="col-12 text-center">
<h2>TITLE CENTER</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h3>heading 3</h3>
<h6>heading 6</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 mx-auto">
<a href="#" class="article-link">
<h3>Heading 3</h3>
<p>Text</p>
</a>
</div>
</div>
<hr>
</div>
</div>
<div class="right col-4 col-lg-3">
<div class="right-content">
<h2>TITLE RIGHT</h2>
</div>
</div>
</div>
You had improper nesting for the columns. Here's the right way to do it (all main columns must sit within the main row):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.left{
background-color: green;
max-width: 200px;
border-radius: 20px;
}
.right{
background-color: blue;
max-width: 200px;
border-radius: 20px;
}
</style>
<div class="parent-container container mt-3">
<div class="row">
<div class="left col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0">
<h3>TITLE LEFT</h3>
</div>
<div class=" col-8 col-lg-6">
<div class="container2 card">
<div class="card-body">
<div class="row">
<div class="col-12 text-center">
<h2>TITLE CENTER</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h3>heading 3</h3>
<h6>heading 6</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 mx-auto">
<a href="#" class="article-link">
<h3>Heading 3</h3>
<p>Text</p>
</a>
</div>
</div>
<hr>
</div>
<div class="right col-4 col-lg-3">
<div class="right-content">
<h2>TITLE RIGHT</h2>
</div>
</div>
</div>
</div>
Note: Right now the columns aren't stacking on the smallest screens. That's because they aren't specified to do so. To make them stack, the responsive column classes for the smallest screens (col-*) all need to be changed to col-12.
You'd also need to adjust the offset classes because right now the offset-8 class kicks in for all screens that are smaller than lg. The offset-8 class is what causes the offset of 8 units (on the left) on all screens that are smaller than lg.

Image gets really small when I put it in a column

My png images gets really small when I put them inside a column in a row. However they are fine when there is not column but then they do not appear as a row and appear one above the other. I have no idea what may be causing the problem.
What I want to do: I want them to appear like this.
<div class="container">
<div class="row" id="parent">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
<div class="heading">
<h3> Simple to Enjoy </h3>
</div>
<div class="inside">
<div class="row">
<div class=""> <!--These Images!!!-->
<img class="img img-responsive img-sec-4" src="images\home_section_4_free_ride.png">
<p>Free Rides </p>
</div>
<div class="">
<img class="img img-responsive img-sec-4" src="images\home_section_4_membership.png">
<p>Free XXX Membership </p>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
<div class="heading">
<h3> Simple to Earn </h3>
</div>
<div class="inside">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
<div class="heading">
<h3> Simple to Save </h3>
</div>
<div class="inside">
</div>
</div>
</div>
</div>
Sorry for bad english and indent.
Here is my CSS:
#parent {
text-align:center;
height:400px;
width:100%;
}
.center {
margin:auto
}
.left {
margin:auto auto auto 0;
}
.right {
margin:auto 0 auto auto;
}
.img-sec-4 {
height: auto;
width: auto;
}
EDIT:
Here is the screenshot of my result:
(The red highlighted area is where the problem is)
simply add class col-xs-6 to the div wrapping those images (each one)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" id="parent">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
<div class="heading">
<h3> Simple to Enjoy </h3>
</div>
<div class="inside">
<div class="row">
<div class="col-xs-6">
<!--These Images!!!-->
<img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
<p>Free Rides</p>
</div>
<div class="col-xs-6">
<img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
<p>Free XXX Membership</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
<div class="heading">
<h3> Simple to Earn </h3>
</div>
<div class="inside">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
<div class="heading">
<h3> Simple to Save </h3>
</div>
<div class="inside">
</div>
</div>
</div>
</div>

How to responsively group rows, then columns in a bootstrap?

I have a responsive web layout based on bootstrap. These are my two layouts:
[1A] [1B] [1C]
[2A] [2B] [2C]
[3A] [3B] [3C]
This is the layout for small screens.
[1A]
[1B]
[1C]
[2A] [3A]
[2B] [3B]
[2C] [3C]
For the small screen, I have a box around the horizontal groups ( 2A & 3A, 2B & 3B etc.). However, on large screens, I would like the items grouped vertically, so all the A's are in a box, all the B's are in a box etc. How do I do this, as the tags need to skip several sections as the HTML is written. Please see my code below. How would I do this?
<div class="container-fluid PageView text-center">
<div class="row Page2">
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 1</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">Text1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 2</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p Text 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 3</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">Text 3</p>
</div>
</div>
</div>
</div>
</div>
EDIT
Using this code, I get the following result:
#media (min-width:769px){ /*use a value for your breakpoint*/
.Page2 > *{border:5px solid white; background:#3DBEAF; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.Page2 > *:nth-child(-n+3){border-bottom:0; }
.Page2 > *:nth-last-child(-n+3){border-top:0;}
}
How do I make sure only the outside 4 corners are rounded? Also, any ideas why there is a line down the middle of the block?
Add a border around all of them and then target the first three/last three to customize the bottom/top border.
#media (min-width:769px){ /*use a value for your breakpoint*/
.Page2 > *{border:1px solid #999;}
.Page2 > *:nth-child(-n+3){border-bottom:0;}
.Page2 > *:nth-last-child(-n+3){border-top:0;}
}
updated code after comment
#media (min-width:769px){ /*use a value for your breakpoint*/
.Page2 > *{border:5px solid white;background:#3DBEAF;}
.Page2 > *:nth-child(-n+3){
border-bottom:0;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.Page2 > *:nth-last-child(-n+3){
border-top:0;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
}
Updated demo
#media (min-width: 769px) {
/*use a value for your breakpoint*/
.Page2 > * {
border: 5px solid white;
background: #3DBEAF;
}
.Page2 > *:nth-child(-n+3) {
border-bottom: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.Page2 > *:nth-last-child(-n+3) {
border-top: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid PageView text-center">
<div class="row Page2">
<div class="col-sm-4">
<div class="glyphicon-ring">1A <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring">1B <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring">1C <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>2A Title 1</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">3A Text1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>2B Title 2</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">3B Text 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>2C Title 3</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">3C Text 3</p>
</div>
</div>
</div>
</div>
</div>
</div>

How to set fixed space between columns with different height with Bootstrap 3?

I'm trying to have a nice grid of items on my site using Bootstrap 3 grid, while each item has a different height.
The problem is that i get different spaces between the items.
Forgive me for the long code, I had to write 6 items in order to show the problem. Once you read the first you'll notice it repeats but with different length due to different item description.
<div class="container">
<div class="row-fluid">
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor1</p>
<p class="boxDescription">Description of vendor1</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor2</p>
<p class="boxDescription">Description of vendor2 which is longer and the layout takes more than one line...</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor3</p>
<p class="boxDescription">Description of vendor3</p>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor4</p>
<p class="boxDescription">Description of vendor4</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor5</p>
<p class="boxDescription">Description of vendor5</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor6</p>
<p class="boxDescription">Description of vendor6</p>
</div>
</div>
</div>
</div>
</div>
The result is that the first row is set right but the second row comes out bad.
I want the spaces between all items to be the same, making it much more fluid.
Note: the heights of the items change all the time, so it has to work with all set of heights.
Take a look at it, you need to resize the result window to max in order to see the problem: http://jsfiddle.net/asafusan/09egpzkj/6/
How can I fix it?
I'm a rookie in programing so please explain extensively.
Thanks
i happen some time if you put less data then other so it become some irregular shape,
for this you have to give a fix height to your div, but it cause one issue that is it will be in same height in mobile or tablet as your applied,
so for this you have use media queries for mobile version
i am declaring another class that is grid, and give static height
Your code looks good, I would use a visual border to see the code. I created a mockup for you here
[http://www.bootply.com/Pzn15AfwyA][1]
.container {
border: 1px solid blue;
}
.result-padder {
border: 1px solid red;
margin-bottom: 10px;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
</div><!-- .row 1 -->
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
</div><!-- .row 2 -->
</div>
</div>
[1]: http://www.bootply.com/Pzn15AfwyA

Bootstrap add margin to column

This is probably very simple, but my mind is getting tangled with trying to work this out. Spent an hour or so searching this up and it still isn't working.
My HTML code...
<div class="section-container light-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align:center;">Main Title Right Here</h2>
<h4 style="text-align:center;">Slogan text underneath</h4>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
</div>
CSS
.section-container.light-bg {
background-color: #F5F5F5;
color: #444444;
}
.section-container .light-panel {
background-color: #ffffff;
border-radius:10px;
}
This is currently creating a row with 4 columns that are styled slightly.
Any help or explanation of how to correctly do this using Bootstrap 3 would be greatly appreciated :)
Demo Fiddle
The best approach is to add an inner container, then padding on the columns. This ensures Bootstraps functionality remains as intended.
HTML
<div class="section-container light-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align:center;">Main Title Right Here</h2>
<h4 style="text-align:center;">Slogan text underneath</h4>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
</div>
</div>
CSS
.section-container.light-bg {
background-color: #F5F5F5;
color: #444444;
}
.inner {
background-color: #ffffff;
border-radius:10px;
padding:10px;
}
.col-md-3 {
padding:10px;
}
Alternatively
You can use calculated width/margins., no change to your HTML necessary.
E.g. the width of col-md-3 is 100/4=25%. Therefore you can reduce this, say to 20%, and allocate the remaing 5% to your margins.
.col-md-3 {
width:20%;
margin:0 2.5%;
}
I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
</div>
This will automatically render some space between the 2 divs.