I have a lot of contents in my paragraph and I need to wrap image with the content.
How can I do this?
<div class="row">
<div class="col-sm-6>
<img src="something/something.jpg alt="something" />
</div>
<div class="col-sm-6>
<p>some loooong text</p>
</div>
</div>
If you have to use col-sm-6, this gives you something similar to your link in the comments:
<div class="row">
<div class="col-sm-6">
<p>First paragraph...</p>
<p>Second paragraph....</p>
</div>
<div class="col-sm-6">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>Third paragraph...</p>
</div>
</div>
Related
I'd like to know how to replace the position for the image from right side to left side and the text from right side to left side
my code is :-
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
There you go. to change the text from right to left just use the class text-left and if you want it to the right use text-right do the same for the image container
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6 layout_padding_2">
<div class="full">
<!-- added class text-left -->
<div class="heading_main text_align_left text-left">
<h2><span> TT </span> ERP </h2>
</div>
<!-- added class text-left -->
<div class="full text-left">
<p> TEST </p>
</div>
</div>
</div>
<div class="col-md-6">
<!-- added class text-left -->
<div class="full text-left">
<img src="images/img2.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
if you only want to show image in left side and text in right side then the image column should be there after the text column
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
</div>
</div>
</div>
Swapping the elements should be helpful.
<div class="section margin-top_50">
<div class="container">
<div class="row">
<!-- Was in 2nd previously -->
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
<!-- Was in 1st previously -->
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
</div>
</div>
</div>
I have three different divs that should be displaying one after the other, but they just jump right up to each other on the webpage. Here is the code for all of them:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="top-section">
<center>
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</center>
</div>
<div class="begin-tour">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>
some text
</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
The best way to explain what happens is through a photo.
I've added the 3 divs into the bootstrap container, took out center(it is not used anymore or supported by HTML5), put each div as a 12 column row(col-md-12 class) so they show up one after the other like you wanted:
<div class="container">
<div class="row">
<div class="top-section col-md-12">
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</div>
<div class="begin-tour col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>some text</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
Here is the plunker so you can see it.
Please let me know if this helps. I didn't see your image until now so I hope it helps.
I can not solve the problem, please help. I do adaptive site with the bootstrap grid and can not locate four images in one line. images should be near without any interval and spacing.
I have my code:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
Images are 295x150 and with intervals in browser
Add the class img-responsive to each <img> tag like so:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img class="img-responsive" src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img class="img-responsive" src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img class="img-responsive" src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img class="img-responsive" src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
I have made a fiddle with no margin/ padding like this:
http://jsfiddle.net/Le6oosvo/2/
I used this HTML:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="one">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="two">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="three">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="four">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
</div>
</div>
</div>
And this little bit of CSS:
.main_boxes .col-sm-3 {
padding-left: 0px;
padding-right: 0px;
}
I used .col-sm-3 in stead of .com-md-3 to make the images align on the side of each other longer (when you squeeze it down). I also added bootstrap class to make the images responsive.
Suppose your images are 200px wide and 200px high. You could try something like
<div class="container">
<div class="row">
</div>
<div class="col-md-3">
<image src="image1.jpg"></img>
</div>
<div class="col-md-3">
<image src="image2.jpg"></img>
</div>
<div class="col-md-3">
<image src="image3.jpg"></img>
</div>
<div class="col-md-3">
<image src="image4.jpg"></img>
</div>
</div>
The bootstrap grid is 12 columns wide. Which means the columns have to add up to 12. You can do this by making four divs of three columns each. It would look something like this when done
Image 1 Image 2 Image 3 Image 4
Hope this helps.
Is there a way to add margins between the columns? Right now it looks like this: http://prntscr.com/5fcdht
It's just the simple column setup:
<div class="container" id="page_content">
<div class="row">
<div class="col-md-8">
<p class="lead">paragraph</p>
<p>paragraph</p>
</div>
<div class="col-md-4">
<p class="lead">paragraph</p>
<p>paragraph</p>
</div>
</div>
</div>
Not so much margin, but rather giving more space between both divs, that cuts into the size of the left.
<div class="container" id="page_content">
<div class="row">
<div class="col-md-7">
<p class="lead">paragraph</p>
<p>paragraph</p>
</div>
<div class="col-md-4 col-md-offset-1">
<p class="lead">paragraph</p>
<p>paragraph</p>
</div>
</div>
</div>
Working with Twitter Bootstrap 2.3.5.
Well basically, my structure is that I have a fixed sidebar on the left (span4) and a main content area on the right (span8, #main)
Within #main I have placed a .hero-unit and after that a row that should contain two columns, both spam4.
Here is a shortened version of my code:
...
<div class="span8 offset4" id="main">
<div class="hero-unit">
....
</div>
<div class="span4" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span4" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
My problem now is that the #main-left and #main-right is now placed outside the container.
What seems to be the problem with my code?
Minus your ID's and any custom classes, this should work for you:
<div class="container">
<div class="row">
<div class="span4">
<p class="text-center"><img class="img-circle" src="http://placehold.it/100x100" /></p>
<p>Look at this stuff, isn't it neat wouldn't you think my collection complete. Wouldn't you think Im a girl a girl who has everything.</p>
<ul class="nav nav-tabs nav-stacked">
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
<div class="span8">
<div class="hero-unit">
<h1>Hero Unit</h1>
</div>
<div class="row">
<div class="span4">
<h3>Head here</h3>
<p>I've heard it said, that people come into our life...</p>
</div>
<div class="span4">
<h3>Head here</h3>
<p>Like a comet pulled from orbit as it passes the sun...</p>
</div>
</div>
</div>
</div>
</div>
View Demo Here
May be this could help you..
<div class="span8 offset4" id="main">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
....
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span6" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
See comments regarding nesting columns and rows. But try this:
<div class="container">
<div class="row">
<div class="span4">
The sidebar content
</div>
<div class="span8" id="main">
<div class="row">
<div class="hero-unit">
....
</div>
</div>
<div class="row">
<div class="span4" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span4" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
</div>
</div>