Using LG WebOS Emulator, i try to view my webpage. But it seems Bootstrap cannot handle very large screen (as seen in screenshot, there're 2 white screen region in left and right side). The Resolution of Emulator is 1920x907
Screen Shot :
The HTML :
<div style="background-color:green" class="container">
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-1">12</div>
</div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row">
<div class="col-lg-12"><div id="dimensions" align="center"></div></div>
</div>
</div>
is this Boostrap's GRID limitation ? if no, how to fix this ?
Thanks before...
Rather than using
<div ... class="container">
try
<div ... class="container-fluid">
I'm not sure which version of Bootstrap you're running with, but in 3.1 (I believe) you have accessibility to this class. As a more custom alternative you can create your own css class, like so,
.container-full {
margin: 0 auto;
width: 100%;
}
which would give you the same result.
Change your .container to .container-fluid
In bootstrap.css, there is a limit set for maximum width
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Bootstrap for large display defaults to 1170px:
http://getbootstrap.com/css/#grid-options
However, you can make a customized build here to define your own default behavior:
http://getbootstrap.com/customize/#container-sizes
Bootstrap properties for large screens are limited to 1170 px and therefore you need to either manipulate the code yourself or either download Bootstrap XL grid classes in a CSS file here;
Bootstrap XL
Related
I have following HTML structure. Is it possible to select first and last my-item element under parent element purely by CSS?
row in which my-item element is can be wrapped in other divs and (Angular) component elements. Also component elements can be nested within each other. This is HTML structure is generated based on current page.
In JavaScript I would accomplish this by selecting all my-item elements under parent as a flat list and selecting a first and last of them.
UPDATE:
Update HTML template to more resemble my actual page content.
var parentElement = document.querySelector('.parent');
var myItems = parentElement.querySelectorAll('.my-item');
var firstItem = myItems[0];
var lastItem = myItems[myItems.length-1];
firstItem.classList.add('red-background');
lastItem.classList.add('red-background');
.red-background {
background-color: red;
}
<div class="parent">
<person-component>
<div class="template">
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Select me!</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row-separator"></div>
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
</div>
</person-component>
<div class="row-separator"></div>
<organization-component>
<div class="template">
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row-separator"></div>
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row-separator"></div>
<person-component>
<div class="template">
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
</div>
</person-component>
</div>
</organization-component>
<div class="row-separator"></div>
<div class="row">
<row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</row-template>
</div>
<div class="row-separator"></div>
<div class="row">
<row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Select me!</div>
</div>
</row-template>
</div>
</div>
The below code can work with the assumption that every child div of the parent has the desired ".my-item" and the every ".my-item" is inside a ".col".
It will select the first and the last div from the direct siblings of ".parent" and then will try to find the first and last ".col" and apply the rule to the ".my-item" inside them.
.parent > div:last-of-type .col:last-of-type .my-item,
.parent > div:first-of-type .col:first-of-type .my-item {
background-color: red;
}
If that's not the case and you really don't know anything about the html structure at all, then I am afraid that CSS cannot help you..
Assuming that all .my-items are always wrapped inside a .col that is in turn wrapped inside at least another div (section) and that each section has only one .row (assumption taken from your example), yes it is possible to achieve what you want using a purely CSS approach. The approach is:
Select .parent, as we're only interested only in selecting .my-item inside this element
As all .my-items always have a div container (whether it be a nested container with class section or simply inside a row container), we can specifically determine which wrapper containers are the first and last. These first and last containers, respectively, must be the container in which the first and last my-item are contained.
As all .section container only has one .row, you can easily get the first and last .col of each .section. This means that to get the first .my-item, simply select the first .col and from the first .section wrapper and apply the style to .my-item. Same logic works for your last .my-item.
Here is a minimal working example below:
let firstChild = document.querySelector('.parent > div:first-child .col:first-child .my-item')
let lastChild = document.querySelector('.parent > div:last-child .col:last-child .my-item')
console.log(firstChild, lastChild)
.parent > div:first-child .col:first-child .my-item {
background: #000;
color: #FFF;
}
.parent > div:last-child .col:last-child .my-item {
background: red;
color: #FFF;
}
<div class="parent">
<div class="main-section">
<div class="section-wrapper">
<div class="row">
<div class="col">
<div class="my-item">Select me!</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</div>
</div>
</div>
<div class="section-wrapper">
<div class="row">
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Select me!</div>
</div>
</div>
</div>
As mentioned, this code works if the above assumption is true. One easy example of when this code will break would be when there may be more that two .rows existing in one section-like wrapper.
I'm having one section of a site which I wondered how can I replicate it using bootstrap, I tried couple of ways but I couldn't get the same result.
I cannot figure out which one will be a row and which one will be a column.
Here is a picture of the section:
Thank you in advance!
I am using bootstrap 3.4.1 if that matters.
Pretty straightforward, you just need to do some nesting of the rows for the bottom. Here is a working solution.
.block {
background-color: red;
border: 5px solid white;
min-height: 50px;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
</div>
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
</div>
</div>
<div class="col-sm-3 block">
content
</div>
</div>
</div>
I have an image section in my HTML like below
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img src="<?php echo base_url();?>assets/images/DJ_parties_web_banner.jpg" style="margin-top:-45px;">
</div>
</div>
</div>
The image is not covering the entire section. There is some white space around it. How can I get rid of it?
how do i completely cover the image from left to right?
You are using bootstrap and .row class has 15px padding, that's why there is white space around your image. Add .no-padding class to <div class="row"> DOM element and in your CSS set the following rule to overwrite Bootstrap rules:
.row.no-padding {
padding: 0;
}
<div class="container-fluid">
<div class="row no-padding">
<div class="col-md-12">
<img src="<?php echo base_url();?>assets/images/DJ_parties_web_banner.jpg" style="margin-top:-45px;">
</div>
</div>
</div>
Please use this code, I hope it's working for you.
Thanks
<div class="container-fluid" style="padding:0px;">
<div class="row">
<div class="col-md-12">
<img src="<?php echo base_url();?>assets/images/DJ_parties_web_banner.jpg" style="margin-top:-45px;" width="100%">
</div>
</div>
</div>
I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example
Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).
I want to create something like this using the bootstrap grid system:
But I can't seem to place COLUMN1 and COLUMN2 one after the other without creating a gap between them (due to COLUMN 3's height):
Here is a code sample of what I've tried (I am not allowed to post the full, actual code):
<div class="row">
<div id="header" class="col-md-4">
COLUMN 1
</div>
<div class="col-md-8" style="background:url('poze/power.jpg'); height:300px">
COLUMN 3
</div>
</div>
<div class="row" id="row_cont">
<div class="col-md-4">
COLUMN 2
</div>
...all the rest
</div>
I think this is what you need. Click Full Page to see the result.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div style="background:red; height:100px">Column 1</div>
<div style="background:blue; height:200px">Column 2</div>
</div>
<div class="col-md-8" style="background:yellow; height:300px">Column 3</div>
</div>