This question already has answers here:
What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
(10 answers)
How to change number of columns in a row for different display sizes
(4 answers)
How to set different columns for different devices in Bootstrap 3
(2 answers)
Closed 5 years ago.
So what I'm trying to achieve is that. When the page first loads, I want this to be displayed:
col-md-6 | col-md-3 | col-md-3
But when the window is resized (or when viewed on smaller screen devices), I want to have
col-md-4 | col-md-4 | col-md-4
Is there a way to do this using Bootstrap without CSS hackery?
I think you need something like this.
<div class="row">
<div class="col-md-6 col-sm-4"></div>
<div class="col-md-3 col-sm-4"></div>
<div class="col-md-3 col-sm-4"></div>
</div>
What this does is, for medium to large screens, the size would be in the ratio 6/12, 3/12 and 3/12.
and for smaller screens, the divs would take 4/12, 4/12, 4/12 of the available width.
Related
I used thumbnail section and view section in my project. So I divided parent div into two div, first is col-md-3(that is thumbnail div) and second is col-md-9(that is view section). Now I want to hide first div and change second div into col-md-12 for small device like mobile or ipad.
Is there any way to make it with media query?
Bootstrap col system for grid has this built in.
When you specify col-md-3 you are saying "at medium screen give this col 3 blocks".
You can also do, side by side col-sm-12 to give it the entire row when on large screen and col-sm-0 to hide it when on smaller screens.
Look here for a better explanation about bootstrap grid system:
https://getbootstrap.com/docs/4.1/layout/grid/
<div class="row">
<div class="col-md-3 d-none d-sm-none d-md-block">THUMBNAIL</div>
<div class="col-md-9">Some data</div>
</div>
This will solve your issue.
For extra small and small screen thumbnail will not appear.
I have a bootstrap 4 layout in my angular 5 application with 2 columns...
One takes up 8 columns, and the other takes up 4 columns.
In the middle I have a border that is thick that I want to be 'grabbable' by the user so they can resize so that they can drag towards the right towards the edge of the screen to make the originally 8 column to take up the whole width of the screen and all of its child elements. (the 4 column basically gets resized away).
Is this possible with Angular 4/5? If not, are there plugins that or extensions that would help do this?
Only thing I have came across is this :
https://codepen.io/ericfillipe/pen/RGNaRK
create set of columns like this
<div class="container">
<div class="grid">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
</div>
</div>
Not sure about angular but might required to wrap this up.
This question already has answers here:
Missing visible-** and hidden-** in Bootstrap
(13 answers)
Closed 5 years ago.
I was using bootstrap 4 and watching a bootstrap 3 course and when i apply what I've watched i see noting happens so after a lot of search i realized that in bootstrap 4 there is nothing called visible-xs, visible-sm, visible-md and visible-lg as well as hidden-* so. I tried read a lot but i can't understand it really well because i'm new to css and bootstrap. what i want is the equivalence of each visible-* and hidden-* in bootstrap 4 (showing elements only on one platform)
my try:
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="visible-xs">Extra Small Devices</div>
<div class="visible-sm">Small Devices</div>
<div class="visible-md">Medium Devices</div>
<div class="visible-lg">Large Devices</div>
</div>
</div>
</div>
According to BS4 alpha documentations,
They have been replaced by .hidden-xs-up .hidden-xs-down .hidden-sm-up
.hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up
.hidden-lg-down.
You could read everything about migration in BS4 Documentation directly.
On a small screen, div1 and div2 are showing side by side overlapped, and I want div1 content shows first and div2 content to be shown just underneath div1. How do I achieve these requirements with or without media queries?
<div class="row">
<div class="col-xs-6" id="div1">
test column1
</div>
<div class="col-xs-6" id="div2">
test column 2
</div>
</div>
Update your elements' classes to this:
<div class="row">
<div class="col-xs-12 col-sm-6" id="div1">
test column1
</div>
<div class="col-xs-12 col-sm-6" id="div2">
test column 2
</div>
</div>
This way, at viewports >= 768px, they'll be side-by-side and at 767px & below they'll display one below the other.
As mentioned in a comment on the OP, please refer to the documentation, which covers this in greater detail: http://getbootstrap.com/css/#grid
This question already has answers here:
AngularJS: ng-switch-when with an OR
(5 answers)
Closed 8 years ago.
I have ng-switch="field.type" for an element containing ng-switch-when but I'd like to have the switch on when it's more than just one field.type.
I would assume something like ng-switch-when="type1 || type2" would work, but it doesn't.
What's the correct way to do this?
You can do solve it by copying the same ng-switch-when element (ie. element with the same content/innerHTML) for every value.
Like this:
<div ng-controller="mainCtrl">
<div ng-switch="expression">
<div ng-switch-when="matchvalue1">Item 1</div>
<div ng-switch-when="matchvalue2">Item 1</div>
<div ng-switch-when="matchvalue3">Item 3</div>
<div ng-switch-default>default</div>
</div>
</div>
http://jsfiddle.net/JoeSham/HB7LU/9201/