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.
Related
There is a requirement here is when we click on Tab Button then on a browser it should highlight all the hyperlink ToolTip and button,
for for me in some case while clicking om tab key it is skipping some part of DOM and skipping some part of button.
How to achieve this
`<div class="tech-section" id="specs-1-0-0">
<div class="row heading-row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-9 col-xl-9">
<h3>Essentials</h3>
</div>
<div class="hidden-xs col-sm-4 col-md-4 col-lg-3 col-xl-3 export-container">
<a class="export-link" role="button" data-user-exit="SingleExport">Export Specifications
<span class="fa-arrow-right"></span></a>
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Collection
</div>
<div class="col-xs-6 col-lg-6 tech-data">
9 Series
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Code Name
</div>
<div class="col-xs-6 col-lg-6 tech-data">
Mansion Beach
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Capacity
</div>
<div class="col-xs-6 col-lg-6 tech-data">
1.5 TB
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Status
</div>
<div class="col-xs-6 col-lg-6 tech-data">
Launched
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Launch Date
<button class="btn-tooltip-trigger view-modal info-modal" data-toggle="modal" data-target=".upe-modal" data-title="Launch Date" data-description="The date the product was first introduced." data-search-title="Find products with Launch Date" data-search-href="" data-search-icon="true">
<span class="fa-tooltip"></span>
</button>
</div>
<div class="col-xs-6 col-lg-6 tech-data">
Q3'18
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Lithography Type
</div>
<div class="col-xs-6 col-lg-6 tech-data">
3D
</div>
</div>
</div>`
like that we have some page: Now when I click on Tab on a page then starting from header it is highlighting all the parts now when it comes to the above loop while clicking Tab key it highlight the line Mansion Beach but when again click on tab it moves out of this and goes to footer
instead it should also highlight Launch Date i.e. we can see in the bottom there is a button that is
<button class="btn-tooltip-trigger view-modal info-modal" data-toggle="modal" data-target=".upe-modal" data-title="Launch Date" data-description="The date the product was first introduced." data-search-title="Find products with Launch Date" data-search-href="" data-search-icon="true"> <span class="fa-tooltip"></span> </button>
But it is not highlighting.
Can anyone help me with the concept like how this "tab key press" works and also how to resolve the above problem
You can check that does text-decoration: none is implemented on the :focus or :focus-visible of that element where Tab highlighting not working?
NOTE: Internet Explorer and Safari don't support:focus-visible.
I'm very new to Angular, but I have a bit of java background. I'm trying to place every 4 divs in a new row, but all the divs are appending in the same row. The below one is my HTML code. How can I achieve the same through angular? The below code contains 1 row. I have to repeat the same for each row.
<div class="row startRow">
<div class="col-md-2 hidden-lg"> </div>
<div class="col-lg-3 col-md-2 shop-list" *ngFor="let shop of shops" (click)="onClick(shop.shopId)">
<i class="material-icons UnSelectedImage">check_circle</i>
<img src="{{shop.brandingImage}}" alt="{{shop.name}}" class="img-responsive orgImage" />div 1
</div>
<div class="col-lg-3 col-md-2 shop-list"> div 2</div>
<div class="col-lg-3 col-md-2 shop-list">div 3</div>
<div class="col-lg-3 col-md-2 shop-list">div 4</div>
<div class="col-md-2 hidden-lg"> </div>
</div>
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.
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 need to shuffle large elements inside my layout due to floating them, and trying to display them. Essentially .gallery-item with class .gallery-large always needs to be first child inside .item, there are several .item containers inside main #gallery_slideshow. At the moment if there is a large item inside second, third etc.. item it gets placed as first element inside first item, where as I want it to stay inside it's own. For example, code below results in 5 elements inside first .item with 2 large ones, instead of initial 4 elements with 1 large one.
JS:
if($('.gallery-item').length > 1) {
$('.gallery-large').each(function(e) {
if(!$(this).is(':first')) {
$(this).insertBefore('.gallery-item:first');
//Reset height of owl carousel wrapper in case moved element was last
$('.owl-wrapper-outer').css('height', 'auto');
}
});
}
HTML:
<div id="gallery_slideshow" class="owl-carousel owl-theme">
<!-- Example page 1 -->
<div class="item row">
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
</div>
<!-- Example page 2 -->
<div class="item row">
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
</div>
</div><!-- END #gallery_slideshow -->
You can simply do,
$(".gallery-large").each(function() {
$(this).parent().prepend(this);
});
Loop through each 'gallery-large' item
Make it as first child by using prepend() method. Prepend it to its own parent to keep the correct context.