I'm using Twitter Bootstrap's media object styling for our user profiles on a social network of sorts. Pretty standard layout: avatar/logo to the left, title and short description to the right (sorry, not enough rep to provide an image, but see jsfiddle below).
Where I'm stuck: I need to include a "follow" button next to the media heading, but I can't figure out how to position it properly to handle a long media heading (the button wraps to the media body).
Suspect I'm heading toward a face-palm moment.
Here's a jsfiddle illustrating both cases.
Here's my HTML:
<div class="row">
<div class="span8 media top-buffer">
<div class="row">
<p class="media-object pull-left span2">
<img class="img-polaroid" src="160x120.jpg">
</p>
<div class="media-body span6">
<h3 class="media-heading">Some Name<i class="icon-circle addToFoo-yes-org"></i> <button class="addToFoo-org btn btn-flat pull-right"><i class="icon-plus-sign"></i> Add to My Foo</button><br />
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
Note, this is for a prototype and I'm firmly in the n00b category, so pardon my janky markup (particularly the egregious use of the i element).
Add a clearfix class to h3.media-heading.
<h3 class="media-heading clearfix">
Related
Using bootstrap, I have this code:
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<h2>How to Enjoy Eating Bugs <small>3/6/2015</small></h2>
<p> I eat bugs for a living...yum!, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.scing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
The output when the page is displayed on desktop is perfect.
When I collapse the page the render does not look the way I want and looks like this:
When the page is collapsed I want the render to look like this:
I could experiment with media queries to accomplish this but I assume there is probably a simpler "bootstrap" way solve the problem. Please answer with minimal example code if possible.
change the classes to col-md-6 col-md-offset-3
It should go full width when the screen size is under bootstrap's definition of medium (992px)
This should be what you are looking for:
<div class="col-xs-6 col-xs-offset-3 col-md-12 col-md-offset-0">
You can change md with lg or xl.
For more info about bootstrap grid system I suggest you to look here, it's full of useful examples
If you have only 2 modes that you want to support, then Stephen Lander's answer is the elegant solution:
https://stackoverflow.com/a/43876855/257090
However, if you want to be explicit, or if you have more than 2 modes, you can set distinct offset/widths for each screen size so the offset will upshift/downshift with device size.
As the size shrinks, you will want to reduce or eliminate the offset, ie. only use offset on the md or lg styles.
<div class="col-lg-6 col-lg-offset-3 col-md-7 col-md-offset-2 col-xs-12 col-xs-offset-0">
</div>
Using Bootstrap 4 alpha 6, I want to show a testimonial, comprising:
On the left: person photo
On the right: quote, name and company logo (left-aligned)
That is at tablet and desktop width.
But, when the window width shrinks, I want to stack the set, so that the image is on top of the text set, and each part becomes center-aligned.
Currently, this is my code...
<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
<div class="container">
<div class="media">
<img class="d-flex mr-4 rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
<div class="media-body">
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." link</i></p>
<h2 class="mt-0">Joe Smith</h2>
<img src="http://placehold.it/150x40" class="img-fluid" width="150">
</div>
</div>
</div>
</div>
This successfully produces the following outcome at desktop width...
However, when shrunk, the arrangement looks like this...
Instead, I would like the image to go on top, rather than be wrapped, and preferably be centered. The text below should preferably be centered.
That code is the media object.
I have also tried using two columns to accomplish this - one of width 2, the other of 10...
<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
<div class="container">
<div class="row">
<div class="col-md-2 text-center">
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="col-md-10 text-center">
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <i class="material-icons md-inverse pmd-sm">link</i></p>
<h2 class="mt-0">Joe Smith</h2>
<img src="http://placehold.it/150x40" class="img-fluid" width="150">
</div>
</div>
</div>
</div>
... This successfully produces the right-looking result at mobile width...
... However,
a) I'm not sure whether this mark-up is correct, and
b) This means the text is centered even at desktop width, which is inappropriate...
I'm getting confused about the right approach, whether/when I should use img-fluid versus a fixed-width image etc. Can I have text be aligned differently depending on the browser width/breakpoint?
The d-flex/mr-auto stuff, I am not wedded to. This was copied from Bootstrap 4 documentation code for the media object.
What's the way to go?
The "correct" approach is a subjective, but you can use the responsive utilities to change the text alignment at different breakpoints. text-md-left will keep item left align on larger screens, and then use text-center to center on smaller screens.
<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
<div class="container">
<div class="row">
<div class="col-md-2 text-md-left text-center">
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="col-md-10 text-md-left text-center">
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <i class="material-icons md-inverse pmd-sm">link</i></p>
<h2 class="mt-0">Joe Smith</h2>
<img src="http://placehold.it/150x40" class="img-fluid" width="150">
</div>
</div>
</div>
</div>
http://www.codeply.com/go/tuTd2OiZFx
I have a situation where I have inline contenteditable span tags together with other non-contenteditable tags which work fine in all browsers except for IE. In IE the tags fail to act as inline and start forcibly aligning themselves as block (sort of). I need something to make them act as inline. It seems that IE is forcing some weird behaviour when the tag is contentedtiable.
<div class="container">
<span class="text" contenteditable="true">Lorem ipsum dolor </span>
<span class="tag">Tag</span>
<span class="text" contenteditable="true"> sed dignissim maximus mattis </span>
<span class="tag">Tag</span>
<span class="text" contenteditable="true"> vel ex ut nisi elementum tincidunt libero</span>
Here is the fiddle with an example:
http://jsfiddle.net/glennmicallef/m7tkgo2u/
Open the fiddle in both IE and Chrome (for example) to see the difference.
In my case, I used the :before and :after pseudo-elements to achieve this.
[contenteditable=true]:before {
content: attr(before-content);
margin-right: 2px;
}
<div class="container">
<span class="text" contenteditable="true">Lorem ipsum dolor </span>
<span before-content="Tag" contenteditable="true"> sed dignissim maximus mattis </span>
<span before-content="Tag" contenteditable="true"> vel ex ut nisi elementum tincidunt libero</span>
</div>
This keeps the pseudo-element part non-editable and the rest editable.
The UX is only good on IE though...
Firstly, look this fiddle: http://jsfiddle.net/Uuyp8/5/
I need to create block like block in next image in the <aside> block.
Don't pay attention to russian words. It's not the question.
I can create such block with next html structure:
<aside>
<div class='block'>
<div class='header'><h1>Lorem block 2</h1></div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper posuere pretium. Mauris vitae pharetra nisl.
</p>
</div>
</div>
<div class='block'>
<div class='header'><h1>Lorem block 1</h1></div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper posuere pretium. Mauris vitae pharetra nisl.
</p>
</div>
</div>
</aside>
Questions:
1) is it ok to use new html5 tags like <aside> or <section> with <div> blocks like in my example?
2) how I can create such block only with html5 tags?
3) Do I need to use only html5 tags or it is normal practic to use both html5 tags and old divs?
Divs aren't "old". They still have theire place like <span> and many others.
See here
QUOTE :
“Sorry, can you say that again?”, I hear you ask. Certainly: you can still use <div>! Despite HTML5 bringing us new elements like <article>, <section>, and <aside>, the <div> element still has its place. Let the HTML5 Doctor tell you why.
So you don't have to ban them from your web pages and you should still use them like you are.
I am trying to code a section of a one-page responsive Bootstrap design that has two side-by-side columns of text. The designer wants these two columns to have a max-width, but once it reaches its max, it is no longer centered (as the rest of the content continues to be responsive).
Is there a way around this to still have the two columns of text centered?
Edit: Here is a link to what the code looks like: http://www.bootply.com/119539
Here try this Bootply. Is this what you are looking for?
<div class="row">
<div class="col-lg-12">
<h2 class="center-block">How We Work</h2>
</div>
<div class="col-lg-4 col-lg-offset-2">
<p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nulla nec lacus condimentum molestie.</p>
</div>
<div class="col-lg-4">
<p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
h2.center-block{
text-align:center;
}
p.text-justify{
max-width:400px;
}
NOTE: You can use col-lg-offset-2 to shift the div by 2 columns.