Anyone know how can i make this texts stay side to the icons? I already try everything..
HTML:
<section class="info">
<div class="container">
<div class="row">
<p>
<span class="fa fa-location-arrow fa-5x"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit
</p>
<p>
<span class="fa fa-credit-card fa-5x"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit
</p>
<p>
<span class="fa fa-calendar fa-5x"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit
</p>
</div>
</section>
CSS:
.info {
background: #f78840;
}
.info .row {
text-align: justify;
}
.info .row .fa {
color: black;
margin: 50px 20px 20px 20px;
}
.info .row p:last-child {
margin-bottom: 90px;
}
I've tried a lot but could not find a solution. Any help is very welcome.
.row {
position: relative;
}
.fa {
display: inline-block;
position: absolute;
left: 0px;
}
.row p {
margin-left: 100px; /* width of the icons */
}
I have not tried this live but it will give you a start of what you might can do.
Our you could add some more divs around the <p>-tags and make them position:relative.
You're already using Bootstrap I think. In that case use its media object. This makes sure that the text always stays to the right of the image. It might be a quite new addition to Bootstrap however.
For some more background information on the media object see Stubbornella's blogpost or CSS Wizardy's blogpost
Without your CSS it would look like below. Perhaps you need to add an additional class to the span inside the .media-left to give it a fixed width if you want all icons to take up the same width.
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
#import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');
<section class="info">
<div class="container">
<div class="row">
<p>
<div class="media">
<div class="media-left">
<span class="fa fa-location-arrow fa-5x"></span>
</div>
<div class="media-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit
</div>
</div>
<div class="media">
<div class="media-left">
<span class="fa fa-credit-card fa-5x"></span>
</div>
<div class="media-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit
</div>
</div>
<div class="media">
<div class="media-left">
<span class="fa fa-calendar fa-5x"></span>
</div>
<div class="media-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit
</div>
</div>
</div>
</div>
</section>
Related
Is it possible to replicate the scroll to top button on my staging website (https://staging2.nomadandinlove.com/) just by using CSS and HTML?
Yes, you can use the scroll-behavior property, setting it to smooth. Although be aware not all browsers support this property. Here you can see the latest stats on this: https://caniuse.com/#search=scroll-behavior
Also you will have no control over the animation. So if you need a solution that will work in most situations and that will give you more fine grained control on the execution of the scroll, use JavaScript.
html { scroll-behavior: smooth; }
body { width: 30%; }
<a id="page-top">Top of the page</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
Scroll to top
Here is an answer close to #Terminator-Barbapapa, but if you don't want to create another element, just add ID to the body and link your button to the body ID as below:
html { scroll-behavior: smooth; }
body { width: 30%; }
<body id="body-id">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac interdum lectus. Nulla feugiat et urna at ullamcorper. Nullam lectus elit, eleifend nec elit sit amet, tempus iaculis nibh. Sed non nisl tellus. Ut vitae rutrum metus, vel varius nunc. Nulla a mattis dolor. Quisque vestibulum quis ante sit amet blandit.</p>
Back to top
</body>
I guess you are trying to attach a button in the end of your webpage which (onlclick) makes the user go back on the top..If so the code will be as follows-
*{
margin:0;
padding:0;
}
#to-here{
height: 120vh;
font-size: 1.5em;
}
<html>
<body>
<div id="to-here">Want to come here ? Scroll Down then click the link..</div>
<a href="#to-here">
Goto Top
</a>
</body>
</html>
So basically i am using anchor tag "" to link to a specific point in web page. You can customize this anchor tag using CSS to make it look much more like a button. For more information of linking you can search for "Linking within a web page".
Hi i want to distribute a text column that i retrieve from an SQL Server(no problem retrieving) into two columns.
This jsfiddle
<div class="container-fluid" style="margin-top:170px;">
<div class="row">
<div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div>
<div class="col-lg-6">
<h1>John Doe</h1>
<h2><b>Director</b></h2>
<h5>
Education, title,
</h5>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-lg-6">
<h3 style="margin-top:50px">
About
</h3>
<p class="pp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis purus. Nulla tristique iaculis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p>
</div>
<div class="col-sm-5 col-lg-6" style="margin-top:90px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula non, posuere nunc. Morbi vehicula ac sapien nec vehicula. Donec commodo, elit consequat consectetur suscipit, turpis urna aliquam odio, eget pulvinar ligula.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis volutpat dui, a mollis lorem. Quisque rutrum in ante id pretium. Curabitur nec turpis lobortis, facilisis..<p>
shows the desired layout. As you can see there is paragraph spaces and it looks good. I am only able to get this far using the column. I can't get it to format like above. Can someone help me get the desired formatting.
First take the h3 header out of the .newspaper element, place it above that one so the text starts on the same level in both columns. Then add corresponding bootstrap classes to both the h3 and the .newspaper DIV to avoid the negative margin and limit the width on smaller screens like in the example you quoted: class="col-sm-10 col-lg-12"
Here's the result: https://jsfiddle.net/sozeojgx/1/
change the class of div to col-xs-6 col-sm-6 col-md-6 col-lg-6
I made changes to HTML only and it works fine.
<div class="container-fluid" style="margin-top:170px;">
<div class="row">
<div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h1>John Doe</h1>
<h2><b>Director</b></h2>
<h5>
Education, title,
</h5>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h3 style="margin-top:50px">
About
</h3>
<p class="pp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis purus. Nulla tristique iaculis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p>
</div>
<div class="col-sm-5 col-lg-6" style="margin-top:90px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula non, posuere nunc. Morbi vehicula ac sapien nec vehicula. Donec commodo, elit consequat consectetur suscipit, turpis urna aliquam odio, eget pulvinar ligula.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis volutpat dui, a mollis lorem. Quisque rutrum in ante id pretium. Curabitur nec turpis lobortis, facilisis..<p>
</div>
</div>
</div>
You can achieve it by just 2 media queries:
#media only screen and (max-width: 768px) {
.margin{
margin-top: 0px;
}
}
#media only screen and (min-width: 769px) {
.margin{
margin-top: 85px;
}
}
Just added a class margin and added media query.
Check this CODEPEN
#media only screen and (max-width: 768px) {
.margin {
margin-top: 0px;
}
}
#media only screen and (min-width: 769px) {
.margin {
margin-top: 85px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="margin-top:170px;">
<div class="row">
<div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div>
<div class="col-lg-6">
<h1>John Doe</h1>
<h2><b>Director</b></h2>
<h5>
Education, title,
</h5>
</div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-sm-5 col-lg-6">
<h3 style="margin-top:50px">
About
</h3>
<p class="pp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis
purus. Nulla tristique iaculis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis.
Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p>
</div>
<div class="col-sm-6 col-lg-6 margin">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis
fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula n</p>
</div>
</div>
</div>
screenshot of the problem
So I've have this irritating problem when smaller div doesn't follow the taller div. Is there a solution for this problem?
.right { float:right;}
.left { float: left; }
.row:after {
content:"";
display:block;
clear:both;
}
<div class="row">
<div class=" col-3 col-m-12 right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
<div class="col-9 col-m-12 left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
display:table-cell instead of float:
.right, .left { display:table-cell; border:1px solid; }
<div class="row">
<div class=" col-3 col-m-12 right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
<div class="col-9 col-m-12 left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
I'm trying to put this icons aside the texts, but i dont know how.
This is the HTML:
<section class="info">
<div class="container">
<div class="row">
<span class="fa fa-location-arrow fa-5x"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit </p>
<span class="fa fa-credit-card fa-5x"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit </p>
<span class="fa fa-calendar fa-5x"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit </p>
</div>
</section>
And this is the CSS:
.info {
width: 100%;
background-color: #f98835;
}
.info .row {
margin: 30px 0;
text-align: left;
}
.info .row .fa {
color: black;
margin: 20px 0;
}
.info .row p:last-child {
margin-bottom: 70px;
}
I was trying to use float: left in the text, but is breaking..
Add the float to the fa class:
.info .row .fa {
color: black;
margin: 20px 0;
float: left;
clear: both; /* may not be necessary */
}
But logically, I would place the span.fa element within the paragraph element, in which case the clear should be moved to the p: .info .row p { clear:both; }.
Add float: left and a width to your .fa class. You can use the col classes to do this for you.
Demo
CSS:
.info {
background-color: #f98835;
padding: 30px 0 100px;
color: #fff;
}
.info .fa {
color: #000;
}
HTML:
<section class="info">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-2 col-lg-1 text-center">
<span class="fa fa-location-arrow fa-5x"></span>
</div>
<p class="col-xs-12 col-sm-10 col-lg-11">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit</p>
<div class="col-xs-12 col-sm-2 col-lg-1 text-center">
<span class="fa fa-credit-card fa-5x"></span>
</div>
<p class="col-xs-12 col-sm-10 col-lg-11">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit</p>
<div class="col-xs-12 col-sm-2 col-lg-1 text-center">
<span class="fa fa-calendar fa-5x"></span>
</div>
<p class="col-xs-12 col-sm-10 col-lg-11">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit</p>
</div>
</div>
</section>
In the CSS, you don't need to set the width of the .info class to 100% because the section element is a block-level element. Moreover, adding padding to the section eliminates the need for the margin on the row and the last-child p element (as last-child is not supported in IE8). Finally, you can remove the text-align: left; since that is the default behavior of paragraphs (unless you've overridden that elsewhere in your css).
In your markup, don't forget to add at least one col class to every row. If you want only one full width column at every breakpoint, then just use col-xs-12. For viewports less that 768px, I made the icon stack. You can change that by setting the col-xs to something other than 12, but you'll probably need to set up some media queries to resize your icon accordingly.
http://pinterest.com/ have a intresting structures of blocks. How I can make the same?
Now I have this code:
li {
float:left;
margin-right:10px;
}
And I get this result:
http://imageshack.us/photo/my-images/339/49022374.png
But, I need this:
http://imageshack.us/photo/my-images/197/86816998.png
Why involving JS?
All you need is a number of floated column divs with inner divs
here is a simple fiddle
HTML
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velitmentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagitti
</div>
</div>
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagittis nibh nulla eget purus. Nunc nec tellus massa. Cras sit amet tortor nec libero condimentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagittis nibh nulla eget purus. Nunc nec tellus massa. Cras sit amet tortor nec libero condimentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
</div>
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis l
</div>
</div>
<div class="col">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ant
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis li
</div>
</div>
CSS
.col {
width:20%;
float:left;
}
.col div {
margin:10px;
padding:5px;
border:1px solid black;
}