I have a widget like this:
<div class="col-md-12 col-xs-12">
<div class="col-md-4 col-xs-12">
1
</div>
<div class="col-md-4 col-xs-12">
2
</div>
<div class="col-md-4 col-xs-12">
3
</div>
<div class="col-md-4 col-xs-12">
4
</div>
</div>
I am embedding the above widget like this
<div class="container">
<div class="col-md-12">
<div class="col-md-3 embedWidget">
<!-- embeeded-widget-comes-here -->
</div>
<div class="col-md-9">
<!-- some other imp content here -->
</div>
</div>
</div>
When I do this my widget is showing as 4 column grid, But I want it to be stacked format (mobile view col-xs), for all responsive widths
how can I achieve it
I tried with width 100% to embedWidget (content is fixing in that area as 4 col grid)
Why don't you put 100% width on embedWidget for media query for smaller devices.
Related
I want to use a push, pull in Bootstrap v5.0.0-beta2, but how?
In Bootstrap 3, I'm using it like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I tried. But I can't. Here is my JSFiddle
In Bootstrap V5, how can I use push and pull?
Please help.
Thanks in advance.
Push/pull is a grid technique. That's now deprecated in favour of flex.
For flex the helper classes are .order-. See BS5 Columns documentation.
You can use global ordering:
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Or screen size specific ... i.e. .order-sm-*, .order-lg-*, and so on.
If you just want to shift, then use Offsetting Columns
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
EDIT:
In your case you can use:
<div class="row">
<div class="col-md-9 order-last">.col-md-9 <del>.col-md-push-3</del><ins>order-last</ins></div>
<div class="col-md-3 order-first">.col-md-3 <del>.col-md-pull-9</del><ins>order-first</ins></div>
</div>
or:
<div class="row">
<div class="col-md-9 order-2">.col-md-9 <del>.col-md-push-3</del><ins>order-2</ins></div>
<div class="col-md-3 order-1">.col-md-3 <del>.col-md-pull-9</del><ins>order-1</ins></div>
</div>
I am building a prototype for a chat application using bootstrap. When the screen size is small, there is some overlapping between the rows. I am stuck and have no clue about the reason behind this weird behavior
Code:
<body>
<section class='menu col-lg-3 col-md-3 col-sm-3 col-xs-3 border'>
<div class='row user'>
<div class='col-lg-5 col-md-5 col-sm-12 col-xs-12 border'>
<img class='user-picture' src='img/profile.jpg'></img>
</div>
<div class='user-name col-lg-7 col-md-7 col-sm-12 col-xs-12'>Error</div>
</div>
<div class='row dialog-box'>dialogs</div>
</section>
<section class='detail col-lg-9 col-md-9 col-sm-9 col-xs-9 border'>
chat details
</section>
</body>
In big screen, it works fine like this:
But when the screen is smaller, it overlaps like this
I am using bootstrap 3.3.5, jquery 1.11.3 and the affix script to try to keep my navigation bar at the top of my screen at all times. It has been working well except when I try to add columns with the col-xs-* and col-md-* classes.
For example it scrolls fine with multiple containers in rows like this:
<div id="container" class="container-fluid">
<div id="about" class="container-fluid">
<!--some information here, it scrolls fine-->
</div>
<div id="resume" class="container-fluid">
<div class="container-fluid">
<!--seemingly the problem has to do with using the xs and md tags-->
<div class="row" style="background-color:lavender;">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lavenderblush;">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lightcyan;">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</div>
</div>
<div id="projects_sidescroller" class="container-fluid">
<!--this one scrolls fine as well-->
</div>
I have set up a jsfiddle link with the problem present. When you scroll down to the coloured table, it's text will display on top the navbar instead of hiding below it. https://jsfiddle.net/mhjyw37d/
Add z-index to your affix class.
Like:
.affix {
top: 0;
width: 100%;
z-index: 999;
}
I am trying to create a layout like this :
I wrote html like this :
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-lg-3 col-md-3">
<div class="row">
<div style="height:400px">
container of menu item, which should be fix on top
<div>
</div>
</div>
<!-- Right side -->
<div class="col-lg-9 col-md-">
<div class="row">
<div class="row">
<div style="height:900px">
Div Scrollable <div>
</div>
</div>
</div>
</div>
</div>
How could i achieve this ?? please help me
The Bootstrap Affix may be what you are looking for. It's what the Bootstrap documentation itself uses to keep the menu fixed to the top while the page scrolls.
One of the possible way:
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-xs-3 clearfix" style="height:400px; background: #f00; position: fixed;">
container of menu item, which should be fix on top
</div>
<!-- Right side -->
<div class="col-xs-offset-3 col-xs-9">
<div style="height:900px">
Div Scrollable
<div>
</div>
</div>
</div>
</div>
</div>
+Fiddle
EDIT
I made just simple demo to keep bootstrap padding you need to add one more container inside of left column.
I am experimenting with Bootstrap and I was wondering how can I adjust number of columns depending of screen size. I saw this from Bootstrap CSS tutorial:
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
I have 6 columns on big screen size and I would like to switch it to two rows of 3 columns on medium screens and to three rows of 2 columns on small screens. It looks to me that I can only change width of columns and not number of columns. Can I do it with Bootstrap and if not what would be a good way to do it? Javascript?
Yes, you can change number of columns with Bootstrap. That's what flexible grid is for.
Here's an example that follows your instructions:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2">first</div>
<div class="col-xs-6 col-md-4 col-lg-2">second</div>
<div class="col-xs-6 col-md-4 col-lg-2">third</div>
<div class="col-xs-6 col-md-4 col-lg-2">fourth</div>
<div class="col-xs-6 col-md-4 col-lg-2">fifth</div>
<div class="col-xs-6 col-md-4 col-lg-2">sixth</div>
</div>
See Bootply Demo.
<div class="row">
<div class="col-lg-2 col-md-4 col-xs-6"></div>
<div class="col-lg-2 col-md-4 col-xs-6"></div>
<div class="col-lg-2 col-md-4 hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
</div>
<div class="row">
<div class="hidden-lg col-md-4 col-xs-4"></div>
<div class="hidden-lg col-md-4 col-xs-4"></div>
<div class="hidden-lg col-md-4 hidden-sm hidden-xs"></div>
</div>
<div class="row">
<div class="hidden-lg hidden-md col-xs-4"></div>
<div class="hidden-lg hidden-md col-xs-4"></div>
</div>
<div class="row">
<div class="col-lg-6 visible-lg">Column 6 Large</div>
<div class="col-md-3 visible-md">Column 1 Medium</div>
<div class="col-md-3 visible-md">Column 2 Medium</div>
<div class="col-xs-2 visible-xs">Column 1 Small</div>
<div class="col-xs-2 visible-xs">Column 2 Small</div>
<div class="col-xs-2 visible-xs">Column 3 Small</div>
</row>
It should be noted that having duplicate content in separate columns like this isn't great for SEO. You might want to instead approach this by using nested columns for more granular control over your content without having to duplicate it.