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.
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
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.
I trying the CSS-Framework Bootstrap and I have a question.
Here is the Fiddle: http://jsfiddle.net/hzAUz/
Let's say I have a div, with 3 equal divs inside of it:
<div id="main" class="row">
<div id="columnleft" class="span4">LEFT</div>
<div id="MainContent" class="span4">Content</div>
<div id="columnrigh" class="span4">Right</div>
</div>
So what happens, when you use Bootstrap, is that as soon as the windows get smaller, the Divs are stacked in this priority:
1. Left
2. Content
3. Right
But it makes sense, to put the content first.
Does anyone know how can insert priorities when using the bootstrap-responsive.css?
Thank you very much in advance.
KG,
George
There's a few ways you can do this.
One would be:
Start at the mobile size, and design "mobile first". That would make your small screen stuff easy, and then you could add additional classes to those containers to accommodate the larger screen sizes.
Another option:
Plan for mobile, and see if you can't either hide/convert your elements in smaller screen sizes to something more mobile friendly. ie...your left stack of nav links become a select menu in mobile; thus, only taking up a single line of real estate.
My preference is to use javascript, and convert left, and top navigation into a show/hide element (button) in mobile size. That way, I've just a logo and button in the top of my UI, and content immediately following.
I do not believe there is a way in Bootstrap 2, but if you were to move to Bootstrap 3, you can control column ordering. See http://getbootstrap.com/css/#grid-column-ordering for details.
Definitively upgrade to bootstrap 3 if you can, as #Sean suggested, but if you can't right now, some of these answers may help:
In Twitter Bootstrap 2, how can I get right columns to move to the top when shrinking the screen?
Firstly, I'd like to say that I don't want to do this with Javascript.
http://jsfiddle.net/WqrBY/2/
In this jsFiddle, I've got two columns but the bottom right div is obviously aligned with the bottom left. I'd like to be able to (without adjusting the markup) move the bottom right div just under the top right (just like how the bottom left is under the top left).
I don't want to change the markup because the order of the divs is important when it switches to a one-column layout for smaller screen sizes.
Can anyone help me out here?
I'm going to preface this with saying I'm not sure why this works... I'm going to keep fiddling to test it. Comments welcome.
Here's my fiddle
Edit:
I know that you specifically mentioned that you don't want to 'change' the markup because of the div ordering. Would you be open to adding to the markup? This shouldn't change the order of information, but it might be a simple fix to what you're trying to do: http://jsfiddle.net/tracyfu/WqrBY/7/
Can anybody take a look at the website I designed http://www.ensorbuilding.com - in Google Chrome.
The middle column almost always overlaps the left and right.
I am using the jquery auto heigh which should set the height of the left,middle and right columns automatically but it doesn't seem to be doing it correctly!
Any thoughts?
Thanks :)
Dan
Try adding some margins to the <aside>s and the <section id="content"> elements.