I am trying to align both paragraphs under the left side of an image, but I can't seem to figure it out. I am also trying to make the width of the text the same width of the image. I need to keep the div align="center" in there so the bootstrap row is on the center of the page. Please help!
Here is an image from my web design on how i'm trying to align it. http://i.imgur.com/kIbyBUS.png
Here is the html code.
https://jsfiddle.net/kvu7y8ym/
<div align="center">
<div id="preview" class="col-lg-4 col-md-6 col-sm-12">
<img id="img" src="http://i.imgur.com/HHGHTsu.png">
<p><b>EXAMPLE WEB DESIGN</b></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum lobortis diam ut ipsum egestas scelerisque. Nam semper lorem
at cursus pulvinar. Ut luct diam.</p>
</div>
</div>
The simplest to accomplish that is to use 2 wrappers, an inline-block and a table-caption.
The table-caption will keep the text within the image's edges, and the inline-block will be centered with the text-align: center set on the #preview element.
#preview {
text-align: center;
}
.inline-block {
display: inline-block;
}
.tbl-caption {
display: table-caption;
text-align: left;
}
<div>
<div id="preview" class="col-lg-4 col-md-6 col-sm-12">
<div class="inline-block">
<div class="tbl-caption">
<img id="img" src="http://i.imgur.com/HHGHTsu.png">
<p><b>EXAMPLE WEB DESIGN</b></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis diam ut ipsum egestas scelerisque. Nam semper lorem at cursus pulvinar. Ut luct diam.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div id="preview" class="col-lg-offset-4 col-md-offset-3 col-lg-4 col-md-6 col-sm-12">
<img id="img" src="http://i.imgur.com/HHGHTsu.png">
<p><b>EXAMPLE WEB DESIGN</b></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum lobortis diam ut ipsum egestas scelerisque. Nam semper lorem
at cursus pulvinar. Ut luct diam.</p>
</div>
</div>
</div>
I'd do it this way if you're using Bootstrap (which it seems like you are because you're using col-lg-4 etc.
When you use those classes they expect to be inside container and then inside a row use different offsets to center the content after that, see example above.
Related
I have whitespace above a row/container (Im not sure which, probably the container?) that I need gone. The code is straightforward,
<div class="row">
<div class="col-md-9">
<blockquote data-wow-delay="0.1s" data-wow-duration="1s" class="about-quote wow fadeInUp">
<div>
<h1 id="one">big</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
</div>
<div>
<h1 id="two">willy</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
</div>
</blockquote>
</div>
Nothing fancy, yet there is constant chunk of whitespace above it separating it from the element above.
I've tried removing it with
body {
margin: 0 !important;
padding: 0 !important;
}
and by replacing body with container, row and col respectively, but the white space remained and it just messed up the layout.
I am trying to put an image and texts side by side in bootstrap inside a single div.. For that I used the class of thumbnail. But using bootstrap thumbnail it makes the image to go at the top and all the texts at the bottom.
So I changed it a bit to put the image and the texts within the thumbnail only and dividing the thumbnail into two parts. But on resizing the screen into small the problem is arising.. The texts are shifting over the image..
Here is the code of what I tried till now
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
<div class="thumbnail" style="border:none; background:white; height:210px;">
<div class="col-sm-6 col-md-6 col-xs-6">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p>
</div>
</div>
</div>
</div>
Screenshot without resizing
Screenshot after resizing
Try this
<div class="col-sm-6 col-md-6 col-xs-6">
<div class="thumbnail" style="border:none; background:white;">
<div class="col-sm-6 col-md-6 col-xs-12 image-container">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p>
</div>
</div>
</div>
css code write this in media query if u need only for mobile
.image-container{text-align:center}
in case if u need both the image and text side by side in mobile device,
remove the height for the image in media query to mobile devices resolution, give width 100% to the image
You need to make sure you're using div's with the class of row around your columns, also if you're going to have col-xs-6 it sets this columns size (6) on the larger sizes too (no need to use col-sm-6 etc also).
Try this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:none; background:white; height:210px;">
<div class="col-xs-6">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-xs-6">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>
Three column layout, all three columns taking up 1/3 of the page. Height of 100%.
http://jsfiddle.net/9ngN3/4/
The column with the most <div class="aTweet">'s in it decides the height of all three columns. The others are 'pulled' down to its height.
I want all three columns to be the same height, with the tweets being at the top. The empty space at the bottom of a column being filled with grey (background).
I just don't see why they are being pulled down to the bottom. It gets super interesting when you set height in .thirdCol to 400px (for eg).
Any ideas? I'm sure this is simple but i'm just missing it. Thanks.
(Using Chrome + Opera BTW)
Code in the JS Fiddle -
HTML:
<div id="manageStockGridArea" class="mainContentGridArea">
<div id="FeedsTab" class="BlockInputArea">
<div id="feed1" class="thirdCol">
<div class="fitler">
<select><option>OP1</option><option>Op2</option></select>
<select><option>OP1</option><option>Op2</option></select>
</div>
<div class="streamContainer">
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
</div>
</div>
<div id="feed2" class="thirdCol">
<div class="fitler">
<select><option>OP1</option><option>Op2</option></select>
<select><option>OP1</option><option>Op2</option></select>
</div>
<div class="streamContainer">
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
</div>
</div>
<div id="feed3" class="thirdCol">
<div class="fitler">
<select><option>OP1</option><option>Op2</option></select>
<select><option>OP1</option><option>Op2</option></select>
</div>
<div class="streamContainer">
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
</div>
</div>
</div>
CSS:
body,html, #manageStockGridArea{height:100%; min-height: 100% !important;}
.thirdCol
{
width:32.5%;
display:inline-block;
background-color:grey;
height:400px;
}
.aTweet
{
background-color:Teal;
}
.tweetHandle
{
display:block;
}
Being inline-block you can control the alignment with vertical-align:
http://jsfiddle.net/9ngN3/4/
#FeedsTab > div{
vertical-align: top;
}
In terms of the columns the same height, there are many tricks available for faux-columns in CSS. Take a look at this example on CSS tricks for more information.
Modify your CSS as follows:
.thirdCol {
width:32.5%;
display:inline-block;
background-color:grey;
min-height:100%;
vertical-align: top;
}
By default, the inline blocks are vertically aligned to the baseline of the text, which corresponds to the baseline level of the bottom-most line of each text block.
Note: Getting the background color is a bit trickier...
You can try this:
demo
.thirdCol
{
width:32.5%;
display:inline-block;
background-color:grey;
min-height:100%;
vertical-align:top;
}
I'm fairly new to coding HTML and CSS, and I'm looking for a starting point with responsive design that will help me finish a project I'm working on.
I have essentially used divs to create a two-column table (using div style="display: table;") and then divs for each column and row. In each row, there is an icon in the left column and text in the right column.
I understand the concept around media queries and have written the queries that I want based on screen sizes.
What I need help with is a starting point for what I need to write inside the queries - essentially resizing the divs and also displaying the divs differently (I imagine with floats) so that I can have the icons in the left column display above the icons in the right column. Basically, I want to stack the divs. I hope that makes sense. I'm not entirely sure where to start. I appreciate any and all help in advance.
Here's my HTML:
<div style="display: table;">
<!--First row-->
<div id="tr1" style="display: table-row;">
<div class="icon" style="display: table-cell;">
<img src="http://3.bp.blogspot.com/-E_DoZ3hZPZw/Uwl7yLn50_I/AAAAAAAAGr8/XpmeP14aphA/s1600/green.gif" width="300"></div>
<div class="words" style="display: table-cell;">
<h1>Text title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p></div>
</div>
<!--Second row-->
<div id="tr2" style="display: table-row;">
<div class="icon" style="display: table-cell;">
<img src="http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg" width="300"></div>
<div class="words" style="display: table-cell;">
<h1>Another text title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p></div>
And here is my CSS:
.icon {position: relative; }
.words {position: static;
vertical-align: middle;}
/* Mobile: Max Size for Mobile Device */
#media (max-width: 639px){
}
Here's the basics of what I've done in This Fiddle:
Indented. Reading code that isn't indented is difficult, and leads to errors.
Removed inline styles.
Set the CSS for the third-level divs to be display: table-cell. Note that this selector should / could be replaced with a class instead.
Added the css to your media query to cause them to "stack" as requested.
Here's the revised code for your reference:
<!-- Removed the "display: table" - not necessary -->
<div>
<!--First row-->
<!-- Remove the "display: table-row" - not necessary -->
<div id="tr1">
<!-- Remove the "display: table-cell" - moved to css -->
<div class="icon">
<img src="http://3.bp.blogspot.com/-E_DoZ3hZPZw/Uwl7yLn50_I/AAAAAAAAGr8/XpmeP14aphA/s1600/green.gif" width="300">
</div>
<div class="words">
<h1>Text title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p>
</div>
</div>
<!--Second row-->
<div id="tr2">
<div class="icon">
<img src="http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg" width="300">
</div>
<div class="words" style="display: table-cell;">
<h1>Another text title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p>
</div>
</div>
</div>
CSS:
/* this selects third-level divs */
div > div > div {
display: table-cell;
}
.icon {
position: relative;
}
.words {
vertical-align: middle;
}
/* Mobile: Max Size for Mobile Device */
#media (max-width: 639px) {
/* change the display to block for stacking */
div > div > div {
display: block;
}
}
It is all about rewriting. So here is something that could inspure you.
<div class="wrapper">
<!--First row-->
<div id="tr1" class="row">
<div class="icon">
<img src="http://3.bp.blogspot.com/-E_DoZ3hZPZw/Uwl7yLn50_I/AAAAAAAAGr8/XpmeP14aphA/s1600/green.gif"></div>
<div class="words">
<h1>Text title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p></div>
</div>
<!--Second row-->
<div id="tr2" class="row">
<div class="icon">
<img src="http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"></div>
<div class="words">
<h1>Another text title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p></div>
</div>
</div>
And the css:
.icon {
position: relative;
display: table-cell; }
.icon a img {
width: 300px;
}.words {
position: static;
vertical-align: middle;
display: table-cell;
}
.row {
display: table-row;
}
.wrapper {
display: table;
}
/* Mobile: Max Size for Mobile Device */
#media (max-width: 639px){
.wrapper,
.row,
.words,
.icon {
display: block;
}
.words,
.icon {
text-align: center;
}
.icon a img {
display: inline-block;
width: 100%;
max-width: 300px;
}
}
Hope it helps.
Wanted to build something like this: http://s29.postimg.org/n2me4y65z/img.png
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
</div>
<div class="col-md-6">
...
</div>
<img src="test.png" class="img-responsive"/>
</div>
</div>
issue 1
Cause the div2 stay below the div 1. (display: block does not work)
issue 2
Make the image always stay on the right side. (then disappearing "hidden-xs")
If someone is able to help ;/
You don't need the outer div with the full width, Bootstrap automatically assumes a 12-column layout. Just make sure you're enclosing everything within a div with a class of "container". You can set the positioning using floats.
<div class="container">
<div class="row">
<div id="div1" class="col-md-8" style="{float:left;}">
Div 1 Text
</div>
<div id="div2" class="col-md-4" style="{float:right;}">
<img src="test.png" class="img-responsive"/>
</div>
<div id="div3" class="col-md-8" style="{float:left;}">
Div 2 Text
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>Div 1 text</div>
<div>Div 2 text</div>
</div>
<div class="col-md-4">
<img src="test.png" class="img-responsive"/>
</div>
</div>
Add the bootstrap's affix or responsive-helpers to your image if you need to pin it on scroll on hide on small -resolution devices.
How about using Media object or Media list if it fits your case?
<div class="media">
<a class="pull-right" href="#">
<img class="media-object hidden-xs" src="//placehold.it/200x150" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
Bootstrap3 - Media object
You can play around with this sample here: http://bootply.com/101967