inherit and individual styles in css - css
I am making a newsletter for emails. That contains of 30 columns that all have th following class:
.content-text {
padding: 10px 10px 10px 10px !important;
font-size: 16px;
line-height: 1.3;
}
Each column need to have the above class, but each column need to have different background colors. Example:
.column--left__content {
background-color: #bebab1;
}
So that would say that column--left__content should inherit everything from content-text. How can I do that the best way?
HTML
<table class="row">
<tbody>
<tr>
<th class="small-12 large-1 columns first first--column__color " style="width:1%;">
<table>
<tr>
<th>
<p></p>
</th>
</tr>
</table>
</th>
<!-- Here is how I solved this until now -->
<th class="small-12 large-5 columns first content-text column--left__content">
<table >
<tr>
<th>
<h5><strong>This is headline 1</strong></h5>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
At the moment I am calling the content-text and column--left__content in the sam <th>, which does not look so nice.
The best practice for doing this, how would that be? I am thinking that fx column--left__content have to inherit .content-text, but have individually styles also?
EDIT
The
One possible way is to use the nth-child selector in CSS.
.wrapper {
color:#fff;
background-color:none;
width:50%;
height:3rem;
line-height:3rem;
font-size:1.5rem;
}
.wrapper p {
padding:0 0 0 1rem;
}
.wrapper p:nth-child(1) {
background: red;
}
.wrapper p:nth-child(2) {
background: green;
}
.wrapper p:nth-child(3) {
background: brown;
}
<div class="wrapper">
<p> col 1</p>
<p> col 2</p>
<p> col 3</p>
</div>
Another possible way is to create your own background-color helper classes in order to use whenever you want to and not only to use for this case.
.wrapper {
color:#fff;
background-color:none;
width:50%;
height:3rem;
line-height:3rem;
font-size:1.5rem;
}
.wrapper p {
padding:0 0 0 1rem;
}
.bg_red {
background: red;
}
.bg_green {
background: green;
}
.bg_brown {
background: brown;
}
<div class="wrapper">
<p class="bg_red"> col 1</p>
<p class="bg_green"> col 2</p>
<p class="bg_brown"> col 3</p>
</div>
There is a 3rd way that has to do with a small jQuery plugin i have made once (i have not updated it though :) since there was no real usage). But the concept is to use simple helper classes for text-color and background-color in your syntax. The rest is done by the plugin. The class that have to just be added in your HTML (nothing in CSS is needed) have the prefix (bgDarken-,bgLighten-,txtDarken-,txtLighten-) and are followed by a number between 1 and 256. Check the results in the snippet.
You can find it here, there are two examples one using Bootstrap (and is posted here in the snippet), and one using Materialize framework.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jLightenDarken Demo with Bootstrap Framework integration.</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {
color:#fff;
background-color:#ffffff;
}
div.alert, div.panel {
background-color:#2196f3;
color:#ffffff;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<div class="panel panel-default bgDarken-4">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-4 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-8">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-8 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-16">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-24">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-40">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-48">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-64">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-80">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-96">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-124">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-140">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-148">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-156">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-164">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-192">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-224">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-255">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<div class="alert alert-info bgLighten-16"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-24"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-40"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-48"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-56"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-64"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-80"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-96"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-124 txtDarken-124"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-156 txtDarken-156"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-164 txtDarken-164"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-180 txtDarken-180"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-192 txtDarken-196"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-216 txtDarken-224"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-232 txtDarken-248"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-256 txtDarken-256"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">!function(n){function t(n){return null==n||""==n||"rgba(0, 0, 0, 0)"===n||"transparent"===n}function o(n){var i=n.parent(),r=n.css("background-color");return t(r)&&(r=i&&null!=i?o(i):""),r}function r(n){var i=n.parent(),o=n.css("color");return t(o)&&(o=i&&null!=i?r(i):""),o}function s(n){var t=n.split("-"),i=[];return 2==t.length?(i.functionality=t[0],i.amount=parseInt(t[1]),i):void 0}function l(t){var o,l,a,e,h=[],c=[],u=[];for(e=0,j=0;j<t.length;j++){"txtLighten"==t&&(e=1),"txtDarken"==t&&(e=-1),o=n('div[class*="'+t+'"]');var g,f=0,p=[];for(n.each(o,function(){for($klassKolor=r(n(this)),p.push($klassKolor.match(/\d+/g)),h.push($klassKolor),l=n(this).prop("class").split(" "),k=0;k<l.length;k++)-1!=l[k].search(t)&&(a=s(l[k]),c.push(a.amount))}),f=0;f<p.length;f++){for(g=p[f],i=0;i<g.length;i++)g[i]=parseInt(g[i])+c[f]*e,g[i]>=255&&(g[i]=255),g[i]<=0&&(g[i]=0),g[i]=g[i].toString(16),g[i].length<2&&(g[i]="0"+g[i]);u.push("#"+g.join(""))}}n.each(o,function(t){n(this).css("color",u[t])})}function a(t){var r,l,a,e,h=[],c=[],u=[];for(e=0,j=0;j<t.length;j++){"bgLighten"==t&&(e=1),"bgDarken"==t&&(e=-1),r=n('div[class*="'+t+'"]');var g,f=0,p=[];for(n.each(r,function(){for($klassKolor=o(n(this)),p.push($klassKolor.match(/\d+/g)),h.push($klassKolor),l=n(this).prop("class").split(" "),k=0;k<l.length;k++)-1!=l[k].search(t)&&(a=s(l[k]),c.push(a.amount))}),f=0;f<p.length;f++){for(g=p[f],i=0;i<g.length;i++)g[i]=parseInt(g[i])+c[f]*e,g[i]>=255&&(g[i]=255),g[i]<=0&&(g[i]=0),g[i]=g[i].toString(16),g[i].length<2&&(g[i]="0"+g[i]);u.push("#"+g.join(""))}}n.each(r,function(t){n(this).css("background-color",u[t])})}n.fn.jLightenDarken=function(){l("txtLighten"),l("txtDarken"),a("bgLighten"),a("bgDarken")}}(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('body').jLightenDarken();
});
</script>
</body>
</html>
Summing up, depending on what you really want each one of those or any other answer presented by other SO users could be the best (or not) solution for YOU.
Assuming you HTML is as follow:
<section class="wrapper">
<div class="col1"> col 1</div>
<div class="col2"> col 2</div>
<div class="col3"> col 3</div>
</section>
your CSS could be like this:
.wrapper > div {
padding: 10px 10px 10px 10px !important;
font-size: 16px;
line-height: 1.3;
}
and have a color for each class:
.col1 {
background-color: red;
}
.col2 {
background-color: green;
}
I hope it helps
One good Choice would be too use CSS Less . You can use #extend concept of CSS Less.
.contest-test {
.context-text(); /* Copies everything from .context-text down here */
border: 1px solid red;
}
Follow this Link here
First: if every single iteration of an element has the same class, you're doing things wrong.
Second: You can easily fix your problem by not assigning a class, but giving the base CSS to the element itself.
For instance something like this:
th {
padding: 10px 10px 10px 10px !important;
font-size: 16px;
line-height: 1.3;
}
And then you just add the background-color classes as you need them.
Related
How to align the text under and side of the image and put them in same row with css bootstrap 4
I want to align the 2 different texts side and under the image as 1 article. and want to put 2 articles in same row when the window size is col-md or bigger. I want the second article to be displayed under the article 1 when the window size is smaller than col-sm. I have tried the below code but I could not put them in same row. How to put them in the same row? <div class="row"> <div class = 'col-4 col-md-2'> <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image"> </div> <div class="col-8 col-md-4"> <p>"aricle 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." </div> </div> <div class="row"> <div class="col-12 col-md-6"> <p>"article 2 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." </div> </div> <div class="row"> <div class = 'col-4 col-md-2'> <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image"> </div> <div class="col-8 col-md-4"> <p>"aricle 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." </div> </div> <div class="row"> <div class="col-12 col-md-6"> <p>"aricle 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." </div> </div>
You should use display:flex; for the row.For when screen size is less, you should consider #media queries.If you need anything else, please let me know.
#media all and (min-width:992px){
.art{
margin-left:80px;
}
}
#media all and (min-width:768px) and (max-width:991px){
.art{
margin-left:100px!important;
}
}
#media all and (min-width:768px){
.container{
display:flex;
flex-direction:row;
}
.row{
flex-direction:row;
}
}
.row{
display:flex;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class ="col-4 col-md-2">
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="art col-8 col-md-6">
<p>"article 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<p>"article 2 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class ="col-4 col-md-2">
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="art col-8 col-md-6">
<p>"article 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<p>"article 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
</div>
</div>
</body>
</html>
Vertical column pushed down other grid elements // Bootstrap 3 [closed]
Closed. This question needs debugging details. It is not currently accepting answers. Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question. Closed 6 years ago. Improve this question I'm a trying to understand how i can make the grid correct for my needs, but i broken my mind. Sorry for my english - just look at the screenshots. >What I'm getting!< >What I need!<
Its quite simple, all what you need is to ensure that logo wrapper will be big enough. You can also use div with .clearfix class or enforce height via css. Here is working example
http://codepen.io/anon/pen/MyGKEL
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#logo img {
width: 100%;
height: auto;
}
#sidebar {
border: 1px solid black;
clear: both;
float: left;
}
#logo {
padding: 10px 0
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" id="logo">
<img src="http://dummyimage.com/200x400" width="100%" />
</div>
<div class="col-md-2 bullet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-2 bullet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-2 bullet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-4" id="phone">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
<div class="col-md-10" id="nav">
<nav class="navbar navbar-default navbar-static-top">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<div class="col-md-9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo aLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut
</div>
</div>
<div class="col-md-2" id="sidebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
</div>
</div>
</div>
</div>
</body>
</html>
Responsive 3 columns layout with different height blocks
I would like to build a responsive 3-columns layout. For large screens I have 3 columns, reduced to 2 for medium and to 1 for small screens. Blocks contain text, so they have different height. My goal is to create a line of blocks aligned to the top (this illustration refers to 3-columns layout but principle is valid for 2-columns too).
But my best result is the following
Pretty different, yes. I think the problem is that I am not able to create virtual "lines" of blocks, where I can align 1-2-3 and 4-5-6 to the top. Here is my code (I haven't posted it on jsfiddle because effect can be noticed better on wide screens).
HTML
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
CSS
.span3 {
float:left;
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:left;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:31%;
margin-left:3.5%;
}
.span3:nth-child(3n+1) {
margin-left:0%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:48%;
margin-left:4%;
}
.span3:nth-child(odd) {
margin-left:0%;
}
}
#media only screen and (max-width:500px)
{
.span3 {
width:100%;
margin-left:0%;
}
}
Can anybody help? Thanks in advance.
Note I know there are tons of frameworks with this feature (like in this question), but if possible I would prefer to keep my own code.
In Bootstrap 2.x, you can do this.. <div class="row"> <div class="span4"> <b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="span4"> <b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque. </div> <div class="span4"> <b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="clearfix"></div> <div class="span4"> <b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="span4"> <b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque. </div> <div class="span4"> <b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> Demo: http://www.bootply.com/120857
i put a row class in each row. here is the code <div class="row"> <div class="span3"></div> <div class="span3"></div> <div class="span3"></div> </div> and float it left and put margin buttom whole code is here http://jsfiddle.net/ndEUS/
Now its working if u use 3 times clear:both but I rly dont know why is needed use there 3x. http://jsfiddle.net/LmPwe/ <div class="span3"> <b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="span3"> <b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque. </div> <div class="span3"> <b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div style="clear:both;"></div><div style="clear:both;"></div><div style="clear:both;"></div> <div class="span3"> <b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="span3"> <b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque. </div> <div class="span3"> <b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
Find it out! Super simple and effective.
CSS
.span3 {
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align:top;
margin-right:-4px;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:33.3%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:50%;
}
}
#media only screen and (max-width:500px)
{
.span3{
width:100%;
}
}
Hope it can help somebody.
Bootstrap Affix conflicting CSS
I want to affix the following code to the top of the page, below the nav so it is always visible. <div class="col-lg-5 nopadd affix"> <h3>Project One</h3> <p>Lorem ipsum dolor ...</p> </div> However when I add the bootstrap .affix it makes it ignore the col-lg-5 class that has been applied. Here is the code I have so far. http://jsfiddle.net/P9d5k/2/ http://jsfiddle.net/P9d5k/2/embedded/result/
try this fiddle I just add a 100% width div with the affix class and inside a .container with your grid inside <div class="affix" style="width:100%;z-index:2"> <div class="container"> <div class="col-lg-5"> <h3>Project One</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.</p> </div> </div> </div>
Float issue css in 960 grid
here's what I wan't to create: http://i.imgur.com/9KdL0UW.jpg, here's what I have: http://i.imgur.com/mRDWoRo.jpg. My problem is the layout of news, as you can see, it's not working properly. I'm working with 960 grid and don't know how to reference it in the fiddle, so i posted is as an image instead.
html:
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<!--FEATURED NEWS-->
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<!--NEWEST-->
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
css:
.grid_3{
background-color: orange;
margin-bottom:10px;}
.grid_9 {
background-color: pink;}
.highlightednews{
float:left;}
.featurednews{
float:right;
background-color:green;
clear:both;}
Your problem here is to do with how your elements are nested. You need to have two parent divs to hold your content like so <!-- THIS IS THE LEFT COLUMN --> <div class="grid_9"> <div class="grid_3"> NEWS ITEM </div> <div class="grid_3"> NEWS ITEM </div> <div class="grid_3"> NEWS ITEM </div> <div class="grid_9"> Full width item </div> </div> <!-- THIS IS THE RIGHT COLUMN --> <div class="grid_3"> <div>FEATURED NEWS ITEM</div> <div>FEATURED NEWS ITEM</div> </div>