I'm using bootstrap 3 I want to use col-xs-12 on an element but on all other displays I want the element and any following elements to use auto width on any larger displays.
I think the answer is media queries but I couldn't find any answers on this issue.
maybe something like col-sm-auto
EDIT: I hope I can properly explains this.
Let's say you have an input and a couple of labels on the page
Now in xs view I want the labels to drop to a new line, to do that I can set the input to col-xs-12 but that will not give the required results on large displays
Can you see how the width of the input is auto in the first image
You could try to add something like
#media (min-width: #screen-sm-min){
.col-sm-auto {
display: inline-block;
width: auto;
}
}
and then add this class to you element.
Or the second approach would be to have two different placeholders for different kind of screens.
For example:
<div class="col-xs-12 visible-xs-block">Some content for extra small screens</div>
<span class="hidden-xs">Some content for small, medium and large screens</div>
Related
I am trying to use this grid/Bootstrap example as my grid layout for alot of charts I want to plot.
This is my FIDDLE. In this example I am just using placeholders that would represent my charts. My qustion is how do I make the charts fit into these slots correctly?
I understand I could just change the size of the chart({width: 300, height: 240}) or placeholder in this example. But I would like to do the opposite and be able to change the div container width <div class="container"> to accomadate the size of the chart.
There is also the problem that this html/css adapts(is responsive) to the screen size, in that the placeholders would become stacked if the screen size gets narrower.
I understand this question may be a bit broad, But I would appreciate some pointers in this area if possible.
If you are using bootstrap4 add .img-fluid or .img-responsive for bootstrap3 class for img
Fiddle
To make the columns stack at different breakpoints you can use the relevant modifying class.
For example:
<div class="col-12 col-sm-6 col-m-4">
<a href="https://placeholder.com">
<img src="">
</a>
</div>
This creates a column that will default to 12 column widths (i.e the full width of the grid). At small screen sizes, columns become 6 column widths, at medium sizes 4... You can choose different numbers as you need. You can also add a class for larger screens, e.g. col-lg-3 (Grid docs)
The second thing you need to do is make the images responsive. You should be able to add the class .img-responsive to your images. (From the docs). However this class doesn't seem to be in the CSS you've provided. I've added it manually to the fiddle.
Apply style="max-width:100%;" in your all image tag. That will fit your image in proper column of bootstrap grid.
when the browser is resized to the mobile sized screen, the two columns in property of col-xs-12 are displayed without any gap.can anyone show how to fix this?
when viewed in large size
when viewed in small size
You can add a media query of your own. So give the bottom one a class like "small-margin-top" and then add this to css:
#media all and (max-width: 700px) {
.small-margin-top{
margin-top: 3em;
}
}
Adjust this to your liking and specifications. I know that bootstrap uses "min-width" instead of "max-width" like I showed you. So do your research on that end to make sure it flows but it should work regardless.
I am creating a website where I need to display some contents {image + text}. I need them to appear to display side by side to fit the display on a PC, and to display tom-bottom order for mobile devices.
In the image the left side shows expected output on a mobile device, the
right side on a PC.
I can put a single TD in each TR by just detecting user agents {if its a mobile or PC} but I need more efficient solution using CSS. DIV is also ok instead of Table layout.
There are a lot of ways to accomplish this, I prefer not to use tables and use divs which you noted is an option.
Using the bootstrap grid system approach is an option that comes to mind.
Here's how I would do it:
Group your blocks by 2 in a parent container and set them to 50% width by default and set them to 100% width on smaller screens using responsive queries.
Here's a simplified markup of what I'm talking about:
<div class="row">
<div class="content-block">1</div>
<div class="content-block">2</div>
</div>
<div class="row">
<div class="content-block">3</div>
<div class="content-block">4</div>
</div>
.content-block {
width:50%;
float:left;
}
#media only screen and (max-width: 767px) {
.content-block {
width:100%;
}
}
and here's a more detailed and a working example:
fiddle
All you should do is to make the default styling in CSS for PC version of website then redo another styling for mobile version as you want but this time inside this template:
#media only screen and (max-width: 500px) {
body {
background-color: blue;
}
}
PS: be sure to specify the correct maximum width for devices you want.
One of best solution is for this is the grid system. You can refer the following links.
Bootstrap is one of best framework for front-end development.
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
I have a container of rows that I'd like to make the container bigger. By default, bootstrap has it at 1200px. I thought that by changing col-md-4 to something like col-lg-4, it would expand the grid but it doesn't for me. Is there a way to expand the grid?
If you don't want to mess around with less variables and just want to increase your container size...make sure your custom css style sheet is called after your bootstrap css so that it isn't overridden and then use a simple css markup in your style sheet such as
#media (min-width: 1200px) {
.container{
width: 1400px;
}
You could even use min-width/max-width properties, or as benja pointed out you could also use container-fluid to maximize your container to the full width of the viewport.
You can use <div class="container-fluid"> for a container that will take the full width of your viewport.
Go to the Customize menu on Bootstrap website and choose your preferred size. In Less Variables -> Grid system you can find a form to input your preferred sizes. Then you can easily download the preferred grid. Hope this will help.
The middle term in col-XX-num corresponds to the screen size that will cause a "break" in your grid so that the items in the grid are responsive. For example, a div with a class of col-sm-4 will take up 4 of the 12 grid cells in a default Bootstrap row until the "small" screen size is noted (in Bootstrap "small" is defined as 750px). Read more about the Bootstrap grid.
If you want to change the width of the Bootstrap container, use this CSS:
.container{
max-width: 1900px;
}
This will make the container wider but will not make your grid bigger. The Bootstrap grid is locked at 12 cells per row. When you use the class col-md-4 as you gave in your example, you are telling Bootstrap to make this element take up 4 out of a possible 12 cells in this row.
Perhaps you will achieve your desired result making your columns take up less cells. Something like col-md-2 then you can use something like col-md-offset-2 to position the column within the row if needed.
Hope this helps!
Adding .col-xs-12 makes my element take up 100% space not only in mobile, how do I make it narrower on desktop? Should I nest additional column classes like .col-md-4 and such?
This is what it looks like on desktop:
.col-xs-12 will render as the default for all viewport sizes if you don't specify a different value for larger screens (eg .col-lg-4 / .col-md-6 / .col-sm-8)
Without seeing your code I can't tell what you are actually trying to achieve, but if you only want the bar to take up 50% in laptop/desktop views for example you would have the html as follows:
<div class="col-md-6 col-xs-12">
Keep in mind that you will need to balance out your grid in the larger views if you go this way (12 columns within the row) http://getbootstrap.com/css/#grid-options
I'm not quite following you but I think you're after the following behaviour
<div class="col-md-6 col-sm-12 col-xs-12">
this will allow for full width on xs and sm viewports