I have here a user profile. I have the html and css code perfect the way I want it.
But what I need now is to combine my html and css together. But I am not sure how to. Because without the css it changes the display of the user profile.
Could someone help me please?
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
</span>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital ">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
<div class="col-sm-
7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-
sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-
sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-
7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-
7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
</div>
</div>
All You Need To Do Is Rap It In <style> ADD CODE HERE </style>
Just wrap the CSS in <style> tags.
Example
<style> /* Note the opening style tag */
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border:2px solid #03b1ce;
}
.tital {
font-size:16px;
font-weight:500;
}
.bot-border {
border-bottom:1px #f8f8f8 solid;
margin:5px 0 5px 0;
}
</style> /* When you're done with the CSS, close the style tag. */
You can keep it exactly where you already have it in your HTML. Here is the exact code you'd use:
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center">
<img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar</h4>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital">Last Name:</div>
<div class="col-sm-7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>
</div>
<style>
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0
}
</style>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
</span>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital ">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
<div class="col-sm-
7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-
sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-
sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-
7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-
7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
</div>
</div>
Put your css code in <style></style> tag and js in <script></script> tag. That's it
Related
I have a list of divs with data. Each div contains a custom data. Each div have data like a table rows and column, but it shows in descending order, I want to show it in ascending order, for example the div which have multiple rows with data, it come first and the div that have less rows come second and so on in dynamically.
The whole process should be dynamically, for example if any div have many rows it come first and the less rows div come to next and so on, the whole process is based on data entry.
Below you can find an example of what I am thinking of, yet it's not working.
image example for the better understanding
.justrow {
display: flex;
justify-content: space-evenly;
}
.table {
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.table2 {
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.table3{
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.header {
display:table-header-group;
font-weight:bold;
}
.rowGroup {
display:table-row-group;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
width:25%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
border-left: 1px solid #ccc;
}
<div class="justrow">
<div class="table">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table3">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
</div>
</div>
<div class="table2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
</div>
You stated that the data is retrieved from a database, so you know how many rows there are in a table and can define a style="--row-count: ..." with each table retrieved.
As each main .table is a flexbox item, you can use the table row count to modify the table flexbox order property and easily change its position inside a .justrow, without Javascript manipulation:
order: 0 or unset -> place table in document creation order
order: negative or lower value -> place table before tables with higher order values
order: positive or higher value -> place table after tables with lower order values
MDN Reference: Ordering flex items
Given the above you can use custom variables for .table --row-count and .justrow --order-sign to set the required sort order for a row of tables.
Essentially, the row count determines the position of a table inside a row and the sign determines the sort direction.
The --order-sign can be defined for each .justrow individually, or just once in :root or body for all .justrow elements (for ease of the demo, in the snippet I used body to define --order-sign).
The equation is easy to understand: order = order-sign x row-count
.justrow {
--order-sign: -1
/*
-1 - Ascending order
0 - no (or document) order
1 - Descending order
*/
}
.table {
order: calc(var(--order-sign) * var(--row-count));
}
<div class="justrow">
<div class="table" style="--row-count: X">table rows</div>
<div class="table" style="--row-count: N">table rows</div>
</div>
In the snippet I added a second two-row table and a few radio buttons to toggle between sort orders:
/* ADDED */
body { --order-sign: 0 }
.table {
order: calc(var(--order-sign) * var(--row-count));
}
/**/
.justrow {
display: flex;
justify-content: space-evenly;
/* added for demo */
flex-flow: row wrap;
gap: 1rem;
}
.table {
flex: 1; /* added for demo */
width: 20%; /* from 25% for demo */
display: table;
border: 1px solid #ccc;
height: 100%;
}
.header {
display: table-header-group;
font-weight: bold;
}
.rowGroup {
display: table-row-group;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 25%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
border-left: 1px solid #ccc;
}
fieldset { margin: 0; margin-bottom: 1rem; }
[red] { color: red; font-weight: bold }
<fieldset>
<legend> Sort Order </legend>
<label for="ord1" title="document order">
<input id="ord1" class="radio" type="radio" name="group" checked
oninput="document.body.style.setProperty('--order-sign', 0);">
(None)
</label>
<label for="ord2" title="most rows first">
<input id="ord2" class="radio" type="radio" name="group"
oninput="document.body.style.setProperty('--order-sign', -1);">
(Asc)
</label>
<label for="ord3" title="least rows first">
<input id="ord3" class="radio" type="radio" name="group"
oninput="document.body.style.setProperty('--order-sign', 1);">
(Des)
</label>
<br><br>
<span>MDN Reference: <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></span>
</fieldset>
<div class="justrow">
<div class="table" style="--row-count: 2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 1</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 8">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 2</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 5">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 3</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 4</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
</div>
So, i'm working on Image Gallery with Bootstrap...
Problem is i can't make four images two on top, three under the top ones and on the left corner vertical image. You can see in the image i have four images placed okay but vertical one is under them...
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
<img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
</div>
</div>
What should i try? here is the image
You may imbricate class and elements ;
possible example
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<img src="http://dummyimage.com/300x600" class="col-4">
<div class="row wrap col-8">
<img src="http://dummyimage.com/300x330" class="mb-auto col-6">
<img src="http://dummyimage.com/300x330" class="mb-auto col-6">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
</div>
</div>
</div>
Here is a suggestion
.col {
margin: 5px;
height: 200px;
}
.col-4 {
margin: 5px 0px;
}
.col-4,
.col {
background-image: url(https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-3.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-8">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div class="col-4"></div>
</div>
i want to add bootstrap row with col-lg-3class. my div contains different heights.hope to add articles with different length texts.
my output is but designed expected output and here. code as follows
<div class="row">
<div class="col-lg-3" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="col-lg-3" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="col-lg-3" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="col-lg-3" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="col-lg-3" style="background-color: #173e43"><p style="height: 44px">5</p></div>
<div class="col-lg-3" style="background-color: #b56969"><p style="height: 70px">6</p></div>
<div class="col-lg-3" style="background-color: #daad86"><p style="height: 20px">7</p></div>
<div class="col-lg-3" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
Updated
values put as 1,2,3 etc comes from mysql database. so the height is equal to text row numbers. php code is follows
`
foreach ($value as $add) {
echo "<div class='col-md-3'><p>";
echo $add->item;
echo "</p></div>";
}
?>`
Perhaps, I ruin your original code. I change everywhere. I hope this helps you.
Add customized stylesheet inside tag head:
<style>
.col-md-3{padding:0px;} // default: 15px -> left and right.
</style>
Here's the code:
<div class="container">
<div class="col-md-12">
<div class="col-md-3">
<div class="col-md-12" style="background-color: #c5d5cb;height: 150px;">
1
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #173e43;height: 44px; color:white;">
5
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #9fa8a3;height: 200px;">
2
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #b56969;height: 70px;">
6
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #e3e0cf;height: 50px;">
3
</div>
<div class="col-md-12" style="background-color: #daad86;height: 20px;">
7
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #b3c2bf;height: 60px;">
4
</div>
<div class="col-md-12" style="background-color: #5a5c51;height: 35px;">
8
</div>
</div>
</div>
</div>
Because I don't know what version of your bootstrap, I use v3.1.1 for clearfix ... you can customize this based on your version.
You are on right track. This will definitely work. You need to use col-md-3 like this :
<div class="row">
<div class="col-md-3">
<p>1</p>
<p>5</p>
</div>
<div class="col-md-3">
<p>2</p>
<p>6</p>
</div>
<div class="col-md-3">
<p>3</p>
<p>7</p>
</div>
<div class="col-md-3">
<p>4</p>
<p>8</p>
</div>
</div>
I think try this
<div class="row">
<div class="col-lg-5">
<div id="1" ></div>
<div id="5" ></div>
</div>
<div class="col-lg-5">
<div id="2" ></div>
<div id="6" ></div>
</div>
<div class="col-lg-5">
<div id="3" ></div>
<div id="7" ></div>
</div>
<div class="col-lg-5">
<div id="4" ></div>
<div id="8" ></div>
</div>
</div>
Hope this will help you..
You can first use columns with col-lg-3 and then place your blocks inside each one. That way you will get your desired result.
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="left-block" style="background-color: #173e43"><p style="height: 44px">5</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="left-block" style="background-color: #b56969"><p style="height: 70px">6</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="left-block" style="background-color: #daad86"><p style="height: 20px">7</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="left-block" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
</div>
</div>
CSS:
.grid-row{
margin-left: -15px;
margin-right: -15px;
}
.left-block{
float: left;
width: 100%;
}
Jsfiddle: https://jsfiddle.net/debraj/6dufsc4u/1/
Hope that helps.
I have three divs inside a 12 col div in a row with a min height set for the desktop view. When the viewer is narrowed, the surrounding div does not stretch to contain the now stacked divs. I know this must be a simple fix but my brain is fighting me! See the Fiddle below and thanks for your help!
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div style="min-height:200px">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content<br>Content<br>Content<br>Content<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content2<br>Content22<br>Content2<br>Content2<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content3<br>Content3<br>Content3<br>Content3<br>
</div>
</div>
</div>
</div>
JSfiddle
Bootstrap columns make use of the float property and therefore are not counted as block elements.
To fix this issue, you need to add overflow: auto to the containing element like so:
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div style="min-height:200px; overflow: auto;">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content<br>Content<br>Content<br>Content<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content2<br>Content22<br>Content2<br>Content2<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content3<br>Content3<br>Content3<br>Content3<br>
</div>
</div>
</div>
</div>
JSFiddle
Try this http://jsfiddle.net/ok696Lkw/4/
HTML
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div class="row">
<div style="min-height:200px">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content<br>Content<br>Content<br>Content<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content2<br>Content22<br>Content2<br>Content2<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content3<br>Content3<br>Content3<br>Content3<br>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div style="min-height:200px">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content
<br>Content
<br>Content
<br>Content
<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content2
<br>Content22
<br>Content2
<br>Content2
<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content3
<br>Content3
<br>Content3
<br>Content3
<br>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
I want to achieve these:
Computer view:
Tablet Portrait view:
Mobile Portrait view:
Currently I have this following code, where the "home-content" part will generate the items#1-items#X:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
<link rel="stylesheet" href="index.css">
<script src="../_lib/jquery/jquery.min.js"></script>
<script src="../_lib/jquery/jquery.fittext.js"></script>
<script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<title></title>
</head>
<body>
<script>
init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="home-noti">
<div class="news-noti">
<div class="news-panel panel">
<div class="news-title panel-heading">
<h2 class="panel-title">NEWSFLASH!</h2>
</div>
<div class="news-items-wrapper">
<ul id="news-items" class="news-items list-group"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div id="home-content" class="home-content"></div>
</div>
</div>
</div>
</body>
</html>
This piece of code can achieve the "Computer view" and "Tablet Portrait view". I could have done it in using 4 of "col-md-3" but that will mean sometimes I might get Notifications col with 2 items on the same row OR Notifications col with 1 item on the same row, which is not what I want. How do I achieve the "Mobile Portrait view" without breaking the layout of the previous 2?
You can use nested columns for this.
row
col-*-*
row
col-*-*
row
col-*-*
Review the Docs and view working example at Full Screen then reduce the viewport.
/**FOR DEMO PURPOSES ONLY**/
html,
body {
margin-top: 50px;
text-align: center;
}
.alert.alert-info {
height: 100px;
border-radius: 0;
}
.alert.alert-info-tall {
height: 340px;
border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div class="alert alert-info alert-info-tall">Notifications</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-sm-4">
<div class="alert alert-info">1</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">2</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">3</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">4</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">5</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">6</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">7</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">8</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">9</div>
</div>
</div>
</div>
</div>
</div>
Try to figure out Bootstrap Gird Options and
you just Need to know when to use which class for which screen and you are good to go.
Here is the working structure for your reference.
<div class="row">
<div class="left-block col-lg-4 col-md-12 col-xs-12">
Aside Section
</div>
<div class="content-block col-lg-8 col-md-12 col-xs-12">
<div class="row" style="padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
</div>
</div>
</div>
Use this :
<div class="container">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="col-xs-12 notification">
<p>Notifications</p>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 1</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 2</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 3</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 4</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 5</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 6</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 7</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 8</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 9</p>
</div>
</div>
</div>
</div>
</div>
And this style will help to get a better look :
.notification {
background-color:#000;
height:auto;
padding-top: 50px;
padding-bottom:50px;
margin-bottom:10px;
}
.item {
background-color:#333;
height: auto;
margin-bottom:10px;
}
p {
color:#ffffff;
}
Here is the fiddle : http://jsfiddle.net/xwmmfu0e/
You need to add an xs prefix. Try this adding col-xs-6 to both divs.
<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
...
</div>