I'm trying to model the following design with Bootstrap.
Currently I've found a method to do this using "carousel-caption" class from bootstrap CSS but it doesn't seem to working as expected.
The html looks like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1000x550" alt="test" class="img-responsive">
<div class="carousel-caption">
<h1>Text word1 word2 superlative.</h1>
</div>
</div>
</div>
</div>
You can see an example of on https://jsfiddle.net/3vf5gog4/2/
This produces a single title but the image doesn't stretch and the title is not vertically centered and I can't figure out how I should be adding another title beneath the current carousel title
This is one of those things with bootstrap that can trip you up. So the .container-fluid class has a padding around it and so to the other grid elements so thats causing the issues with the stretch. Vertically centred elements in CSS can be a pain there is one good method I've seen on it but I typically just eye ball the percent and add some precent
I've edited your fiddle to take out the bootstrap padding and centre that text.
https://jsfiddle.net/3vf5gog4/5/
Try this :
.carousel-caption{
postion:absolute;
top : 20%;
}
Related
I am attempting to create a pattern of two divs, side by side, repeating vertically. One side is to contain an image (which I've done using CSS background image) and the other text. The side which contains the image alternates each row.
The divs use the Bootstrap grid's col-sm-6 class. It looks great on desktop but I'm having trouble getting it to look good on smaller devices.
The issue is that because of the order in which the code is written, when it collapses down to 100% width on mobile it goes:
image
text
text
image
image
text
instead of:
image
text
image
text
image
text
The only workaround I've thought of so far is to have two of each image div, one before and one after the text div, and to hide or display them based on the size of the screen. Not a great solution though. Any thoughts?
put your content like following
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
This will give you what you want
In the end I put them all in the same order and then went with this:
.campaign-idea:nth-child(odd) {
.image {
float: right;
}
}
I want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after
I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.
I'm using Bootstrap 3.
I have a series of rows with two columns. The first column displays text and the second column has an image. I want to vertically centre the text in the first column relative to the row it's in so it aligns nicely with the adjacent image.
Example HTML:
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Some heading</h2>
<p>I want all this text centred relative to the image next door</p>
</div>
<div class="col-sm-6 image">
<img class="img-responsive" src="http://i.imgur.com/cztLHHo.png"/>
</div>
</div>
</div>
Note that I'm using the Bootstrap img-responsive class to correctly resize images for mobile devices.
JSFiddle
What I'm seeing is this:
What I want to achieve is this:
I'm sure this is a commonly performed bit of CSS ninja action but I can't find a good example of it. Can anybody help? I would prefer a CSS solution.
Take a look at this fiddle link
i have used the following property in css
.row
{
display: flex;
align-items: center;
}
I have a layout that i need to build as can be seen in the image:
Grey stands for header, and there are no problems there. As for the body, I've split it into 3 divs as follows:
<div class="row">
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
<div class="col-lg-6">
<img src="path/to/image.jpg">
</div>
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
</div>
The problem I have is that I need that text to be vertically centered, and I don't know how. I've tried this solution Twitter Bootstrap 3, vertically center content but it doesn't seem to work for me (maybe I'm doing something wrong). I've tried adding padding-top to fix it, but it messes up the mobile display (as expected).
Please, can anyone help?
Thank you.
Text align property is only for horizontal text align, if you want to make text align vertically you need to use position property, we can make using text align something like that. for example: use center of the screen property.
position:relative;
left:50%; top:50%;
also minus margin property off of the container with.
The simplest way to center vertically is to add display:table to the containing element, and display:table-cell to the element you want centered. Bootstrap has a .text-center class to handle the horizontal centering.
http://www.bootply.com/lTigluKakK
Using your example as template:
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
<div class="col-xs-6 text-center">
<img src="//placehold.it/400x400">
</div>
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
CSS:
.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */
.v-align-content{display:table-cell;vertical-align:middle}
This works great if you're able to define the height of the sidebar divs. But, if you need them to match the height of the center element dynamically, you'll need a little more bootstrap magic to tie them together, but this will still apply to centering the content within those sidebars.