I have a list of horizontal divs that I cannot make them act as I want them to.
What I want to achieve is have
for md, lg, sm - a list a rectangular divs that contain a small "thumbnail" class image of any sized image and continue with the user's name horizontaly - as can be seen in the example in md view.
for xs I want to have each entry below the other, name below the image - which should be screen size.
I could not exemplify with the image as I already used too much inline css.
http://www.bootply.com/T0AAHhHU0h
Unless I misunderstood your question, it looks like you're pretty close to what you're looking for... just change your col-md-3 to col-sm-3 and the switch to vertical layout will happen at xs breakpoint instead of sm breakpoint, as here: http://www.bootply.com/Ba1aGC1Lds.
<div class="col-sm-3" style="margin-bottom:20px">
<div class="col-md-12" style="border:1px solid #C0C0C0;background-color:white">
<div class="col-md-4" style="background-color:black;height:60px">
</div>
<div class="col-md-8">
<strong>John Smith</strong>
</div>
</div>
Related
I am including a template inside a modal which is being used elsewhere as well ::
<div id="addressModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div ng-include="'templates/add-address.html'"></div>
</div>
</div>
</div>
i dont want to modify the grid system inside this template only for this modal window , as it is being used in other places as well . So my question is that there are coloumns in this template with :
<div class="col-md-4 col-sm-6>'my content'</div>
since my modal window is small, u can consider it in 'sm' range, but nevertheless it positions its layout according to 'md' only . Is there any tweak to have the modals accept grid sizes according to the modal window size ?
Here is not about how small is your modal window, but about screen width.
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
You can see in the bottom of this page the width in pixels for each .col class.
So, you must think it as screen resolution, when you use the .col classes to be activated. This, or you can create your own classes with width estimated in % and use media to proper display them.
I'm trying to build a side Control Panel for Dashboard something similar to http://demo.neontheme.com/dashboard/highlights/
Can anyone give me some pointers for some examples where I can start building it ?
Thanks
Take a look at Bootstrap's vast range of Components (if you haven't already), and break down the functionality according to what you wish to accomplish.
For example, at a glance:
I can see that the page is fluid, and the left-hand navigation takes up roughly 2/12 (by default, Bootstrap utilises a 12-column grid system).
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-2">
<!-- Menu -->
</div>
<div class="col-md-10">
<!-- Content -->
</div>
</div>
</div>
</div>
Accordions are in use to collapse/expand menu items, so you can harness Bootstrap's collapse.js to achieve this.
Also, some menu items have Labels and/or Badges attached to them, which Bootstrap also caters for.
Resources:
http://www.getbootstrap.com/css/#grid-example-fluid
http://www.getbootstrap.com/javascript/#collapse
http://www.getbootstrap.com/components/#labels
http://www.getbootstrap.com/components/#badges
I'm using bootstrap 3 and AngularJS and I have two column fluid layout.
The two columns are declared like so -
<div class="chart col-md-8">...</div>
<div class="options col-md-4">...</div>
If the user's browser window is less than a certain width, or if they resize it to less than a certain width, I want to hide the options column and make the chart column take up the full width of the screen. How would I do this?
Look here:
Responsive Utilities
If you add the .hidden-xs class to the options div it won't be visible for extra small devices (<768px). Find the appropriate class for your usage. You can use a single or a combination of the available classes for toggling content across viewport breakpoints.
<div class="options col-md-4 hidden-xs">...</div>
Bootstrap provides specis helper classes for this. So for your situation it can be:
<div class="chart col-md-8 col-xs-12">...</div>
<div class="options col-md-4 hidden-xs">...</div>
It means that when xs media query is triggered .options column will be hidden and .chart will expand to full width (12 cols).
<div class="chart col-md-8 col-xs-12">...</div>
<div class="options col-md-4 hidden-xs">...</div>
Now the chart becomes full width when the sceen is less that 768px wide
In the CSS file you can hide the chart div for a specified max-width of a screen:
#media ( max-width : 768px) {
.chart {
display:hidden;
}
}
you can set the desired max-width to hide the chart in pixels.
However, you can use the standard bootstrap classes to hide anything you want for many devices.
For example:
class="chart hidden-xs" hides it from extra small devices, like
mobiles.
class="chart hidden-sm" hides it from small devices, like
tablets.
class="chart hidden-md" hides it from medium devices, like
13" laptops.
class="chart hidden-lg" hides it from large devices, like normal 15.9" devices.
I would like to have some blocks of content display in one column in portrait mode (iPhone 5+ is 640px wide), and two columns when in landscape mode (iPhone 5+ is 1136px wide). My understanding reading the documentation (http://getbootstrap.com/css/#grid-media-queries) was that below 768px wide, Bootstrap would use the col-xs-* classes and that above 768px, Bootstrap would use the col-sm-* classes.
My markup looks something like:
<div class="col-xs-12 col-sm-6">some content</div>
<div class="col-xs-12 col-sm-6">some more content</div>
What am I missing here?
Remove the period before .col-sm-6 in the markup. Should be like this with only a space between:
<div class="col-xs-12 col-sm-6"></div>
Markup doesn't need the class indicator. Furthermore you only really need col-sm-6 because by default Bootstrap automatically goes to col-xs-12 below 768.
<div class="col-sm-6"></div>
I'm working with Zurb Foundation 4.3 and am having trouble wrapping my head around Zurb's small and large column classes. In the code sample below using just large classes for columns, the 2nd column will get repositioned below the first column when the UI width changes. This is nice because it keeps the UI content clean
<div class="row">
<div class="large-8 columns rounded">
Bubbles
</div>
<div class="large-4 columns rounded">
Yadda Yadda Yadda
</div>
</div>
However, if I add small classes to the columns, the 2nd column doesn't get repositioned resulting in a messy UI.
<div class="row">
<div class="small-4 large-8 columns rounded">
Bubbles
</div>
<div class="small-8 large-4 columns rounded">
Yadda Yadda Yadda
</div>
</div>
I like the ability to be able to change the column widths of the content as the overall page changes widths. However, as I drag the page from wide to narrow, the content doesn't reposition if I use the small classes. What am I missing? Thanks.
The small classes control the widths of your columns on small screens, without specifying small classes, columns default to small-12 or 100% width on small screens which is why you see them stack vertically.
In your second example, the first column to second columns ratio will be 1:2 for small screens instead the 2:1 on medium screens. The columns positioned next to each other in the same order but their sizes are swapped.
This should be what you are seeing.
If you wish to have them stack vertically like in the first example but swap the order of columns, use
<div class="row">
<div class="large-4 push-8 columns rounded">
Yadda Yadda Yadda
</div>
<div class="large-8 pull-4 columns rounded">
Bubbles
</div>
</div>
If this is not what you wish to achieve I'll help you specify another solution