I am trying to make a simple layout using Bootstrap 3, and it looks fine on laptop, but when I try to emulate in Chrome for small screen such as Iphone 5, one of my image is going to the next row, though I was expecting it to be at the same row as the heading. Visually, there seems to be enough space, and I tried pulling, pushing, applying offser but could not get it working yet.
Can anybody help point out please what am I doing wrong here?
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="col-md-4 column"></div>
<div class="col-md-4 column"></div>
<div class="col-md-4 column">
<div class="row clearfix">
<div class="col-md-6 column">
<img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" />
</div>
<div class="col-md-6 column">
<h2>Venue 2015</h2>
</div>
</div>
</div>
</div>
</body>
</html>
the col-md-* classes are only for screensizes from 992px to 1200px - if you want a 2-column-layout on small displays, add the col-xs-* classes.
In your case:
<div class="row clearfix">
<div class="col-md-6 col-xs-6 column">
<img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" />
</div>
<div class="col-md-6 col-xs-6 column">
<h2>Venue 2015</h2>
</div>
</div>
You could write a function in Javascript that specifies the (smaller) sizes of specific elements if screen size is under a certain size. The full size image would still load, but the script would tell it to load width smaller width and height for smaller screen size.
Related
I have the following structure of my page:
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="picture">
<div class="row" style="margin-left:0px !important;margin-right:0px !important;padding-bottom:10px;">
<div class="col-md-1">
<img src="url" />
</div>
<div class="col-md-11">
Some name <br/>
Some email
</div>
</div>
</div>
</div>
<div class="col-md-3">
some text here
</div>
</div>
</div>
My issue is that when device width is smaller, name and email goes on the next row but not in the same row where image is. How to fix that? It should be responsive. Thanks!
Every column at a mobile breakpoint will have a width of 100%, which means your .col-md-* classes will all have a width of 100% at smaller sizes. This is a common expectation for responsive grid systems.
To get the image and inputs on the same line, you will have to add another class that overrides the widths set by the bootstrap col classes. Bootstrap has specific classes to target different breakpoints that you can use. See: https://getbootstrap.com/examples/grid/
HTML
<div class="col-md-1 col-xs-6">
<img src="url" />
</div>
<div class="col-md-11 col-xs-6">
Some name <br/>
Some email
</div>
This should do the trick.
I'm using a Bootstrap grid to create a quad chart, and leveraging the CSS3 flexbox layout mode discussed here to make each column in the same row the same height. However, I want to use a Bootstrap well in each quad to highlight the "quad-ness" of the chart and I can't seem to figure out how to get the wells to fill all the space in the column divs.
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
</div>
I have a playground here (be sure to go full screen on the result to see the quad chart).
I tried modifying the well class' CSS to set height to 100%, but that just seems to increase the height of the outer divs as well (example here).
Any ideas how I can get the wells to fill up the divs they're in without increasing the height of the divs?
Edit #1
To be clear, I'm not asking how to get all of the columns in a row the same height. The Flexbox solution using the row-eq-height class does that for me.
What I'm trying to figure out is how to make the Bootstrap well within a column div be the full height of the column div, regardless of how much content the well contains.
I've updated my two examples (linked above) to include border lines around the column divs to try and better articulate what I'm talking about.
Check this DEMO
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
Can I mix different columns (col-xs-, col-sm- etc) in my layout?
For example, I have:
<div class="col-xs-12">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
and more many col-xs columns.
But now for example, I want to change first column from full width to half in tablets and monitors, so I added "col-sm-6 col-sm-offset-3" and remove "col-xs-12" because "col-sm-6" means "col-xs-12":
<div class="col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
And it works, but this is correct with bootstrap grid system and standards?
Or Maybe I have to add "col-sm-*" to others? :
<div class="col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12 col-sm-12">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
Or maybe I have to keep "col-xs-12"?
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
Or maybe I have to keep "col-xs-12" and add "col-sm-*" to others to have identical types in all divs?
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12 col-sm-12">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
Which versions is correct? How do I properly mix different types of columns?
Bigger sizes override smaller sizes (e.g. col-sm will override col-xs unless the screen is smaller than col-sm). Personally I always add a col-xs and I only add the bigger sizes when I need them.
Example:
<!-- full width on phones and half on anything bigger -->
<div class="col-xs-12 col-sm-6">
...
</div>
This information is all found in Bootstrap's Documentation. It is perfectly fine to add multiple col-*-* classes to a <div> element:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
...
</div>
Is a perfectly viable class structure, that renders different column sizes depending on the current size of the viewport. If xs, it would be a full-width column. Small is half, medium is a 3rd and large is a 4th (based on a 12 column layout.)
If you need more information, take a look here:
Bootstrap Grid System
All the other answers explain what overrides what, but to answer your question about what you have to have, the default is 100% width. So if you only specify:
<div class="col-sm-6">
...
</div>
then when you get smaller than 768px it will go from 50% (6 columns) to 100 (12 columns)
Column sizing will default with the smallest size first (xs) with subsequent classes overriding the original size.
For example:
<div class="col-xs-12"></div>
Will appear as with 100% width on all browsers.
The following will appear as 100% on mobile browsers and 50% on tablets and up.
<div class="col-xs-12 col-sm-6"></div>
I used the Zurb Foundation Framework to create a website on an HP Envy X2 PC Laptop with a 1366 x 768 32 bit screen resolution. My code works fine when opened on computers with larger screens, but when I tried my website on a smaller netbook screen, the main content (excluding the banner and footer) became squished. By squished, I mean that instead of the content spanning the screen in 3 neat columns, the words and images were set in a vertical display with each being put underneath the one before it.
I was under the impression that the Zurb Foundation Framework is designed to work on all devices, big and small. I am mistaken?
I didn't touch the CSS aside from changing my html {background-image} and a:hover {color} so I'm curious as to how it would fail on smaller screen resolutions.
I tried the Zurb Foundation Forums, but that place dead, just filled with questions that float around never to be answered.
If anyone knows why I could be experiencing smaller screen problems, I would appreciate any answers.
The problems you are experiencing are by design. Looking at the docs for Foundation Grid we see that there are classes that tell the grid how to respond to certain screen sizes .small-*, .medium-*, .large-* (where * is the number of cells the element should span).
Following this convention, if we wanted 3 columns on a large and small screen we would need the markup to look as follows:
<div class="row">
<div class="columns small-4 large-4 panel">
<h3>One</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Two</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Three</h3>
</div>
</div>
specifying the class small-* makes sure the column will adhere to the specified size when the screen is "small".
In short, make sure you add the class .small-* to your columns if you want them to adhere to a specific width on smaller screen sizes.
Edit
Here is a snippet showing the differences
<html>
<head>
<title>Foundation Grid</title>
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />
</head>
<body>
<h1>Without ".small-"</h1>
<div class="row">
<div class="columns large-4 panel">
<h3>One</h3>
</div>
<div class="columns large-4 panel">
<h3>Two</h3>
</div>
<div class="columns large-4 panel">
<h3>Three</h3>
</div>
</div>
<h1>With ".small-"</h1>
<div class="row">
<div class="columns small-4 large-4 panel">
<h3>One</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Two</h3>
</div>
<div class="columns small-4 large-4 panel">
<h3>Three</h3>
</div>
</div>
</body>
</html>
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.