Website content - html

I've tried many ways to code but none of them works. The 3 products are listed vertically in one column. But I have no idea on how to separate the the following <div> containing 6 others product into different columns beside it. Can you help me to solve this?
Or, in other ways, can the <div> is actually aligned into 3 products per row, not in column?
<div class="products-right-grids-position1">
<h4>BUN BOY Bakery</h4>
<p>Best Bakery in Town </p>
<p> </p>
</div>
</div>
</div>
<div class="products-right-grids-bottom">
<div class="col-md-4 products-right-grids-bottom-grid">
<?php
echo getPros();
?>
<?php
echo getBreadPros();
?>
</div>
<div class="clearfix"> </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
</div>

Related

Bootstrap images not displayed in a single row

I've been trying to create few images that should be displayed in a single row.
Currently it is displayed one-by-one.
Here's my code:
# CSS:
.emblems-section {
z-index: 1;
text-align: center;
}
<header>
<div class="container">
<div class="row">
<div class="col-md-12 emblems-section justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</div>
</header>

For anyone looking for the same solution, the answer is d-flex within the parent div.

<div class="container">
<div class="row">
<div class="col-md-12 emblems-section justify-content-center align-items-center">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</div>
</div>
//you have to add row after col-md-12

It is best practice that try to avoid unnecessary div or other elements in code structure. so you don't need to use col-md-12 just replace col-md-12 to row class and remove duplicate row div.
Use below code, by using this you can remove one unrequired div element, so your code looks compressed and beautiful.
<header>
<div class="container">
<div class="row emblems-section justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-md-12 d-flex emblems-section justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</div>
you can add d-flex class with col-md-12

How align horizontal items?

I want to align these elements in mobile view
I want that on mobile devices the images are on top of the text and not on the side.
<div class="container">
<div class="row vcenter">
<div class="col-xs-12 col-sm-6 col-md-2">
<h3>Why Us?</h3>
</div>
<div class="col-xs-12 col-sm-6 col-md-10 items_why">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/destination_expert.png">
<span>Destination Expert</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/faster.png">
<span>Faster</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/transparent.png">
<span>Transparent</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/cheaper.png">
<span>Cheaper</span>
</div>
</div>
</div>
</div>

The <div>s containing <span>s should be contained in another row so they can be part of another grid within the grid.
<div class="container">
<div class="row vcenter">
<div class="col-xs-12 col-sm-12 col-md-2">
<h3>Why Us?</h3>
</div>
<div class="col-xs-12 col-sm-12 col-md-10">
<div class="row">
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/destination_expert.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Destination Expert</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/faster.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Faster</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/transparent.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Transparent</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/cheaper.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Cheaper</span>
</div>
</div>
</div>
</div>
</div>
You can try it here: https://www.bootply.com/new

Put space between row for bootstrap image gallery

I am using bootstrap and i want to create space between row 1 and row 2. There are 6 images together and row 1 and 2 has 3 images in each row
This is my code for each image
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/1thumb.png" alt="Main">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/2thumb.jpg" alt="Elevator1">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/3thumb.jpg" alt="Elevator2">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/4thumb.jpg" alt="Elevator3">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/5thumb.jpg" alt="Interior">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/6thumb.jpg" alt="Reception">
</div>
</div>
</div>

You can just add margin bottom to the columns.
Something like
.row > div { margin-bottom: 15px}

Bootstrap row dissapearing

I have a form that contains several rows, but one of them is disappearing.
The source code looks like this:
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
</div>
</div>
<div class="row"><!--this row dissapears-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
<h1>thing2</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
...
</div>
</div>
As far as I can tell this code looks fine, but this is what it turns into when it gets displayed.
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
<h1>thing2</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
...
</div>
</div>
This makes thing1 and thing2 appear together and not on their own row, and I have no idea why.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
</div>
</div>
<div class="row"><!--this row dissapears-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
<h1>Row that disappears.</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
Last Row
</div>
</div>
The code doesn't seem to have any problem #Trevor. I just implemented it and it works well according to me. Let me know if i have misinterpreted your problem.

This code works fine. please check your css file or bootstrap library.
please use bootstrap cdn link.

Turns out my issue was not bootstrap at all. Thanks everyone for mentioning you can't reproduce it, made me dig deeper. The issue turns out to be what was in the div. It was an angular select element with a self closing tag. Changing it to a normal closing tag fixed everything. I excluded it because I thought it was not important and didn't verify before posting.

Using bootstrap to go from 3x2(desktop) to 2x3 (mobile) layout

My webpage in desktop view is divided into a 2x3 layout i.e two rows with 3 grid-columns each (bootstrap rows and columns), as given in below:
**image1 image2 image3
image4 image5 image6**
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image1.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image2.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image3.png"/>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image4.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image5.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image6.png"/>
</div>
</div>
When I reduce to a mobile size(col-xs), I want the page two be in a 2x3 layout, as given below:
**image1 image2
image3 image4
image5 image6**
Can this be achieved using the bootstrap framework?

Just add the declaration for the xs viewport in your column classes and make it a single row, like you see below. As long as the columns (and column offsets if you're using them) equal to 12, you can use a single row wrapper to make several rows worth of columns. I'm glad I could help.
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image1.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image2.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image3.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image4.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image5.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image6.png"/>
</div>
</div>
Example:
http://www.bootply.com/8JlDo3kXKH