Bootstrap CSS Tile Grid - html

I am repeating some kind of tiles in a div with class row. It looks like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
It should look like this: IMAGE
Which basically means that no matter what display size it should always show as many tiles as possible in one row. Currently this does not work on a mobile device for example. Anyone know to fix it?


Is this what you were looking for?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
<div class="ccol-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
</div>

Related

I want to show my progress bar in this format col-sm-6 in >546px screen(sm) but its doesn't show any changes no matter what i do

if bootstrap can't handle this can anyone suggest an other method
ya even I have use col-xs-6
all I want to show my progress bar in image shown in small screen size
here that's how want to show my image in small screen
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-1">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-2">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-3">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-4">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-5">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-6">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-1">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-2">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
</div>

You can add this #media only screen and (max-width:546px) if you want it smaller than 546px. if it doesnt work put !important on all of it.
.row {
display:grid;
grid-template-columns:auto auto;
grid-gap:10px;
}
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-1">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-2">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-3">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-4">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-5">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-6">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-1">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="progress-title progress-bar-2">HTML</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
</div>

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

Bootstrap - How do I have a column flow over multiple rows

I am trying to create a layout shown below:
C1 C2 C3
C4 C5 C3
C6 C7 C3
I am having trouble trying to have a column fill the height of all three rows.
This is the code I have tried.
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="row equal">
<div class="col-sm-3">
Location:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
No. of Frames:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
More Info:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
</div>
with this css:
.lgImage {
background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
right: 0;
position: absolute;
}
This code doesn't work

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.lgImage {
background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
}
.column{height:100px; line-height:100px; background-color:#e5e5e5; text-align:center; margin-bottom:10px;}
.sidebar_div{height:320px; line-height:300px; background-color:#e5e5e5; text-align:center; margin-bottom:10px;}
</style>
</head>
<body>
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c1
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c2
</div>
</div>
</div>
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c4
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c5
</div>
</div>
</div>
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c6
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c7
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="sidebar_div">
c3
</div>
</div>
</div>
</body>
</html>

This fill surely helps you to get what your requirement was:
HTML:-
<section class="col-md-8">
<div class="col-md-6">CL1</div>
<div class="col-md-6">CL2</div>
<div class="col-md-6">CL4</div>
<div class="col-md-6">CL5</div>
<div class="col-md-6">CL6</div>
<div class="col-md-6">CL7</div>
</section>
<aside class="col-md-4">
<div class="col-md-12">CL3</div>
</aside>

Is this what you need?
.lgImage {
background-image: url('http://placehold.it/800x50');
right: 0;
position: relative;
width: 800px;
height: 50px;
}
.row.equal {
display: flex;
justify-content: space-around;
}
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="row equal">
<div class="col-sm-3">
Location:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
No. of Frames:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
More Info:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
</div>

Bootstrap-table: Grid system - How to put image with width in different rows and the same column

I want to show in the window-modal the info and image of a product but I do not know to put an image with it large is various rows of the grid.
My code is:
<div class="row">
<div class="row">
<div class="col-md-6 descFields impFields">
CODI
</div>
<div class="col-md-6 .offset-md5">
<img class='img-modal' src='prod/images/nofoto.jpg'>
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
EDICIÓ
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
PÀGINA
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
MODIF.
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
USER
</div>
<div class="col-md-6">
</div>
</div>
</div>
I would like that all columns are in the same distance:
I'm trying to use offset parameters and child parameters but It's not working :(

You can rewrite your code structure..
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12 descFields impFields">
CODI
</div>
<div class="col-md-12 descFields impFields">
EDICIÓ
</div>
<div class="col-md-12 descFields impFields">
PÀGINA
</div>
<div class="col-md-12 descFields impFields">
MODIF.
</div>
<div class="col-md-12 descFields impFields">
USER
</div>
</div>
</div>
<div class="col-md-6">
<img class='img-modal' src='prod/images/nofoto.jpg'>
</div>
</div>
divide grid in 2 section first section for data and second for image...

How to set each column same height?

Help me, how to set each column same height? I have this structure:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
</div>
</div>
In this case, the content displayed is as follows:
But when I try to resize the browser window, the content is shifted wrong:
And so should:
How to fix it?

One way would be to add a clearfix that's only visible on the smaller viewports..
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
</div>
</div>
http://bootply.com/ZDDbPlCraT

create a custom css class in your .css file
.fixed-height {
height: 200px;
}
Then add this to your HTML as follows:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
</div>
</div>