I'm new to bootstrap. Here I'm not able to figure out how can I achieve this kind of layout alignment using bootstrap. I tried but not able to achieve this, can anybody help me to do this!
Here is, what I want to achieve:
Here, there are two boxes side by side, left box (green with text) and right box having youtube video. when you resize it, that green box should go to the top of video box like stack. The text inside the green box should be vertically and horizontally center aligned.
You can use different CSS definitions for different window size.
Look here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
and here: http://getbootstrap.com/css/#grid-media-queries
and here (example matching your problem): http://learnlayout.com/media-queries.html
You can create that layout with bootstrap. You may need to write your own because bootstrap's grid adds gutters between columns by adding padding. You should be able to add a background color to a column, but the content does not touch the edge like in the video example you posted.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3">Green box</div>
<div class="col-xs-12 col-sm-9">Video</div>
</div>
</div>
Take a look at this jsfiddle for an example.
Read through Bootstrap's grid documentation if you would like to modify it.
Related
I'm only a few months old in web development and i know my code is pretty simple but i have tried everthing i know but it is not working. The text and image are not aligning side by side if i increase the width of the image to 100% . also i want the image to go off screen. here is my html code (removing the images since i cant post it).
My css code just contains width=100%; and overflow:hidden;
<div class="row">
<div class="col-lg-6">
<h2>BE HEALTHY</h2>
<p>We are Fitlo, your number one app for weight loss, diet planning and a better overall well being. We’re dedicated to giving you the very best of health and lifestyle from the comfort of your home or office.</p>
</div>
<div class="col-lg-6">
<img class="image" src="" alt="bowl of food">
</div>
</div>
I do not have enough reputation to comment, so I will post this as an answer.
Just to be sure, you're using col-lg-6, so that will put the columns at 50% after large screen and above. If you're looking at a small screen, you'd need either col-md-6, or col-sm-6, or just col-6 if you want 2 columns all over.
If you already know that, then add the class img-fluid to your image. That should work out. This is the Bootstrap class to make images responsive. Bootstrap Responsive Images
I tried it on the attached JSFiddle link, make sure to expand the display box for the -lg breakpoint to take effect.
I want to place a paragraph float to the left, while an image floats to the right.
(working demo -> https://jsfiddle.net/DTcHh/6557/)
There will be some paragraphs without an image, so I was wondering how I would be able to make this responsive. As of now, when I resize the window, nothing stacks or changes.
I wanted to incorporate using
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
But it doesn't seem to be working the way I want it to. Thank you!
I made a quick fiddle here: https://jsfiddle.net/AndrewL32/e0d8my79/42/ with text on the left and an image on the right and they seem to be stacking as they should.
I think the reason why your columns are not stacking is probably because you didn't link your bootstrap files properly (on the jsfiddle you made and most probably in your html file too).
Try adding this line to your <head>....</head> section:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
And check if that helps.
Here's my problem. I am using Bootstrap 3. I need an element to remain 'absolute positioned' within a two column layout. My layout works great but on a tablet or mobile the design means that text scrolls underneath the 'absolute fixed element'.
If you resize the browser on a live demo you will see what I mean here: http://www.concise-courses.com/test-yourself/y/a.php
What is the work around to prevent the text scrolling underneath the clock? I was thinking a background image (didnt work) or a fading technique (didnt really work) or just text-overflow for vertical scrolling....
Any ideas? Thanks as ever!
If you want to hide column A when mobile, just add hidden-xs as a class to that column. It will hide the specified column when the screen is smaller than 768px (e.g. Bootstraps' "xs" setting, see Bootstraps' grid system for more information).
An example: JSFiddle
<div class="row">
<div class="hidden-xs col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
How you want it to look when its on mobile? static? or just hiding the text that behind it?
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
http://bootply.com/101886
why the second row left a gab there? I want to ask is this the right way or the right markup of a template? I found sometime my div isn't aligned properly. Do you guys think use container again to wrap all the <div class="container"><div class="row"><div class="col-md-12"> is a good practice? because when you resize into mobile, there isn't padding.
Is this what you want to do?
http://bootply.com/101968
I think paddings for the background is not necessary but for texts it is better to have proper paddings in mobile view, which is Bootstrap3's default settings.