this has to have been asked before, but i don't think my "terms" are correct.
i have a page that has text, and then an image. When the image ends, i would like the text to flow under the image.
So,
<div class="row">
<div class="col-xs-10 col-xs-offset-1 ">
<div class="hero-unit row">
<div class="col-xs-12 ">
<h2 class="welcome">welcome</h2>
</div>
<div class="col-xs-8 ">
<p>some text here</p>
<p>imagine there is more text here</p>
<p>just, the most text ever.</p>
</div>//col-xs-8
<div class="solidClass col-xs-4 ">
<img class="img-responsive" src="/WebContent/img/both.png" alt="screenshots"/>
</div>
</div>//hero-unit-row
</div> //col-xs-10
</div>//row
in the scenario above, the text in the "col-xs-8" row should overflow when the text gets past the image in the col-xs-4 row.
is there something i can tell bootstrap by way of a class, or something i can add to a specialty class to make this happen?
The structure you would need for this layout is the next:
<div class="col-xs-12">
<div class="solidClass col-xs-4 pull-right">
<img class="img-responsive" src="http://lorempixel.com/100/100" alt="screenshots" />
</div>
<p>some text here</p>
<p>imagine there is more text here</p>
<p>just, the most text ever.</p>
</div>
Demo: http://plnkr.co/edit/vSq4rsJPbjfvdn6FYiR9?p=preview
Two important points:
Extend "left" text container to full width with .col-xs-12 class.
Move image container into text container and float it right with pull-right class.
In order for your intended effect, the image has to be in the same parent element as the text.
You can then use bootstrap's pull-right class to float the element to the right.
I, also, assume that you intended for the text to be able to fit the full 12 col width. If you want the image to still be limited to a 4 column width, you can wrap it in a bootstrap col-xs-4 class.
<div class="row">
<div class="col-xs-10 col-xs-offset-1 ">
<div class="hero-unit row">
<div class="col-xs-12 ">
<h2 class="welcome">welcome</h2>
</div>
<div class="col-xs-12">
<div class="col-xs-4 pull-right">
<img class="img-responsive" src="/WebContent/img/both.png" alt="screenshots"/>
</div>
<p>some text here</p>
<p>imagine there is more text here</p>
<p>just, the most text ever.</p>
</div>
</div>
</div>
</div>
Bootply here: http://www.bootply.com/hANj4uFgb2
Related
I have the following html code to place an image next to div as in facebook comments:
<div className="row">
<div className="col-sm-1">
<img
className="img-thumbnail"
src="image.jpg" />
</div>
<div className="col-sm-11">
<div className="bg-light rounded p-1 pl-2">
<span className="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
However, this use of grid creates a space in the first div (col-sm-1) since the image size is smaller than the allotted width on the div. You can see the problem visually below. Any suggestions to mitigate this?
UPDATE
When using col-sm-auto, there is always a space left from the right because of col-sm-11, as you can see in the image:
You can use col-sm-auto instead of col-sm-1 which will shrink the column to the width of the content (the image). Also remove the left or right padding on the columns.
https://www.codeply.com/go/SLirjy4KDw
<div class="container">
<div class="row">
<div class="col-sm-auto pr-0">
<img class="img-thumbnail" src="//placehold.it/40">
</div>
<div class="col-sm-11 pl-0">
<div class="bg-light rounded p-1 pl-2">
<span class="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
</div>
You can use two div with d-inline as class. As these spaces will disappear
https://getbootstrap.com/docs/4.3/utilities/display/
I'm wondering what is the best way to stack a div? Would I be best off using the div class table? Here is my code
<div class="row">
<div class="col-md-5 content1">
[rotatingtweets screen_name='lauterbachgroup']
</div>
<div class="col-md-4 content2">
<p>Gallery</p>
</div>
<div class="col-md-3 content3">
<p>content3</p>
</div>
<div class="col-md-5 content4">
<p>content4</p>
</div>
</div>
I am trying to get the last content box to flow underneath the first box. I think I may be overthinking it but I have a couple more things I would like to try but, any advice would be great.
Hello i'm working on a project and i got a problem.
My "items" (which are divs) get out of the container when i minimize my window.
My code is a bit weird but it's working so far, here's where are my items.
<div class="containerpage">
<div class="container">
<div class="artcontainer">
<div class="row">
<div class="container">
<div class="col-md-10">
<div class="col-sm-4 col-md-4">
<div class="post">
<div class="post-img-content">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive" />
<span class="post-title"><b>Make a Image Blur Effects With</b><br />
<b>CSS3 Blur</b></span>
</div>
<div class="content">
<div class="author">
By <b>Bhaumik</b> |
<time datetime="2014-01-20">January 20th, 2014</time>
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Read more
</div>
</div>
</div>
</div>
</div>
<!-- Same col-sm-4 col-md-4 several times on col-md-10 that make my "thumbnails"-->
<div class="col-md-2">
<!-- Image that you can see on the right -->
</div>
</div>
</div>
</div>
</div>
Now what i get when i minimize my window : http://i.stack.imgur.com/wid7y.jpg
As you can see my blocs (HTML5) are outside of the container, plus there's a grey space at the right that blocks another image (which is in the col-md-2), can this be from a margin or padding on the body or main part ?
Every other elements on the site automatically resize themselves but no this part, where is my mistake ? Is this from the CSS ?
I'd actually like my items not to be smaller when i minimize but instead having one by row automatically when minimizing.
-- Also i've always used col-md most of the times, is there an equivalence for smaller screens that i should precise when i make my col ?
I hope i've been clear enough (:
Try adding the following line to your css class for the DIV elements:
display: inline-block;
This should make the DIVs to go down a row if they don't have enough room.
You can achieve spacing between columns using the col-xs-* classes,within in a col-xs-* div coded below. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:
( Note : You can Use col-xs-* or col-md-* or col-sm-* . i used col-xs-*)
<div class="container">
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
</div>
Great Keval Bhatt, i changed width px to % and it worked almost perfectly !
I also tried display: inline-block; but when i minimized, my items were "behind" the container so they disappeared.
Changing px to % worked, thanks again ! (:
I'm trying to have image next to the headline in one row, both centered in Foundation 5. Example is here.
HTML
<div class="row">
<div class="panel small-12 column">
<div class="row">
<div class="small-5 column text-right">
<img src="http://placehold.it/60x60&text=logo" />
</div>
<div class="small-7 column text-left">
<h1>APP NAME</h1>
</div>
</div>
</div>
</div>
In this example solution isn't ideal because it is not centered exactly especialy on the large screens.
I've also tried something like this:
HTML
<div class="row">
<div class="panel small-12 column text-center">
<img src="http://placehold.it/60x60&text=logo" />
<h1>APP NAME</h1>
</div>
</div>
But it doesn't work: image isn't centered. What is the best way how to do this in Foundation 5?
Since an img is an inline element and h1 is a block element, you should put the image inside the heading. See the JSFiddle demo.
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="panel small-12 column text-center">
<h1><img src="http://placehold.it/60x60&text=logo" alt="" /> APP NAME</h1>
</div>
</div>
Additionally, alt is a required attribute, so I've added one with a blank value.
I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>