I've been trying to adapt my website to extra small window sizes with Bootstraps but I didn't found any solution for myself.
I want to shown one column when the window is too small and keep the left version otherwise. At this point, the code is something like:
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="divLeft">
<div class="panel panel-success" id="divChart">
<!-- Some progress bars -->
</div>
</div>
<div class="col-xs-12-offset-6 col-sm-6" id="divMain">
<h2>Observations</h2>
<div class="list-group" id="observations">
<!-- Some panels -->
</div>
</div>
What I have to do? I tried to add multiple classes to my divs divLeft and divMain but it doesn't work as I want.
Thanks in advance fellas! : D
Each row should always add up to 12 columns.
Have a look at the Bootstrap Docs which tell you about how to work with their grid system:
http://getbootstrap.com/css/#grid
I'd suggest something like the below for your example:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9"></div>
</div>
</div>
The above should result in the two columns displaying one above the other on extra small devices.
Related
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
I can't seem to get this well to align with the center of the page. It seems like it should be easy but I can't figure it out.
You can use offset classes provided by Bootstrap
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="well">
Content
</div>
</div>
</div>
</div>
CODEPEN
Bootstrap is based on a grid system of 12 columns. If you want the above message submission box centered I would place it in a column space of ~6 and have ~3 columns on each side of it like this:
<div class="row">
<div class="col-xs-3">[Empty DIV]</div>
<div class="col-xs-6">[Summision Box]</div>
<div class="col-xs-3">[Empty DIV]</div>
</div>
Sorry for the really confusing title. What I'm trying to do should be quite easy in theory.
I think the best way to demontrate it is by showing you an image:
1 row at the top with 2 columns, and every other column coming after that should be positioned under the second column...
Is this doable?
Thanks
That's what the "offset" classes are for. col-md-offset-1 applied to the elements in the second column (as additional class) should do what you want (for medium viewport size)
(probably you use wider columns with classes like col-md-3 that span three columns of the grid. In this case you'd need col-md-offset-3for the offset)
use col-md-offset-* class
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"><p>fixed column</p></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
for more information :
Bootstrap Grid System - Bootstrap Grid Examples -
Try HTML display : flex for such layout. For example refer below link.
https://css-tricks.com/snippets/css/a-guide-to-flexbox
Try below code snippet.
<div class="row-fluid">
<div class="span4"><div class="well">1</div></div>
<div class="span8">
<div class="row-fluid">
<div class="span6"><div class="well">2</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">3</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">4</div></div>
</div>
</div>
</div>
i have 3 col in medium view in bootstrap shown in above image ie.
i want to achieve this type of view in small view is col-sm-*
my code is
<div class="col-md-8">
<div class="col-md-12">A</div>
<div class="col-md-12">C</div>
</div>
<div class="col-md-4">
<div class="col-md-12">B</div>
</div>
IN THIS way i can achieve my target in medium view but cant achieve in small view.how can i achieve the both view as well as in medium and small view as shown in image.
I suggest reading bootstrap css doc also this
But try this:
<div class="row">
<div class="all a col-sm-12 col-md-6">A</div>
<div class="all b col-sm-12 col-md-6">B</div>
<div class="clearfix"></div>
<div class="all c col-sm-12 col-md-6">C</div>
</div>
You can remove the <div class="clearfix"></div> if you don't care about the height mismatch
Here's a working jsfiddle
It's a bit of a stretch, but you could try this:-
<div class="col-md-8">
<div class="col-md-12">A</div>
<div class="col-md-12 visible-sm visible-xs">B</div>
<div class="col-md-12">C</div>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<div class="col-md-12">B</div>
</div>
Frankly, I can't think of any other solution using just HTML and CSS. Although, if scripts were involved, it would be a different case.
First of all, you shouldn't assign columns without rows, so you should have something like:
<div class="row">
<div class="col-md-8 col-xs-12">A</div>
<div class="col-md-4 pull-right col-xs-12">B</div>
<div class="col-md-8 col-xs-12">C</div>
</div>
So you pull right your B Div (therefore not clearing the next div, and spacing it out). And with col-xs-12 you assure that float won't be present in mobile.
Heres a pen
Now, if you want to remain with your code, I guess Shan answer is the best one.
Well, you could have the height of B and work with margins so the positioning go right, but that isn't considered best practices and could cause some bugs.
I'm having an issue where the height of one of my panels increases dramatically when I reduce the window size. Specifically, I have two panels in one row - one is col-grid-5 and the other is col-grid-4. The col-grid-4 header height (2nd one below AKA Recent Active Projects) is the one that is increasing way more than it should. Here's a plunkr:
http://plnkr.co/edit/NfI2xjth4ZU02duwLKDv
<div class="col-md-5">
<div class="panel">
....
</div>
</div>
<div class="col-md-4">
<div class="panel">
....
</div>
</div>
If you resize the window of the plunkr, you'll see it happen during a certain window width range. The problem goes away if I reorder the tables (i.e. put the 2nd one first). However, I can't figure out why that works.
Any tips would be great!
This is a float clearing issue. You need to include another .row tag around your nested .col-sm-6's. Simple answer is that any time you have a group of columns in bootstrap, you need a row around them.
<div class="col-md-5">
<div class="panel">
<div class="panel-heading no-border bg-primary">
<span class="text-lt">Time Summary</span>
</div>
<div class="row">
<div class="panel m-n col-sm-6 padder-v">
Hours Today
<i class="icon-arrow-right pull-right m-t-lg"></i>
<div class="h2 b-b m-t-sm">2.50 </div>
</div>
...
</div>
</div>
</div>
Updated plunker: http://plnkr.co/edit/rQqusAmUEWFrKMEqxRmz?p=preview