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>
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 need to have one border around four div elements which will be displayed as a row.
Check Pic
This is the template I'm using:
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="well">
<div align = "center">
<h4>Forecasted Cum.Oil (STB)</h4>
<h3><b>{{cum_oil_rate}}</b></h3>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="well">
<div align = "center">
<h4>Forecasted Cum.Water (STB)</h4>
<h3><b>{{cum_water_rate}}</b></h3>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="well">
<div align = "center">
<h4>Last Decline Rate</h4>
<h3><b>{{decline_rate}}</b></h3>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="well">
<div align = "center">
<h4>Final Oil Rate (STBD)</h4>
<h3><b>{{final_oil_rate}}</b></h3>
</div>
</div>
</div>
</div>
Now I need to enclose these four div elements inside a box.
Can someone help me on how to do this?
Add a custom class to your <div class="row my-class">
Then in your CSS add :
.my-class {
border: 1px solid black;
}
.col-sm-3 {
border: 1px solid black;
}
.row {
border: 1px solid black;
}
Try this
How can i solve this problem with CSS of floating DIV like in photo:
In my case, DIV-s after red DIV doesn't float arount it.
I have created divs in this form:
<div class="outer">
<div class="col-lg-6 col-sm-12 col-md-6">
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
</div>
</div>
You could wrap the left and right side in seperate div Tags, like this:
Edit: Updated Example for updated Question. You might need to watch the Stack Snippet in Fullscreen.
*Edit 2: I was wondering, why it was working on jsfiddle (https://jsfiddle.net/6z4orL6b/), but not as Stack Snippet, so instead of changing my Snippet to some kind of workadround, I decided not to change anything here. Instead, I will explain, why this happens. On JSFiddle the Custom CSS below gets applied AFTER the CSS from Bootstrap, and since it is called Cascading Stylesheet, the custom styles are overwritten by Bootstrap.
At jsfidlle on the other hand, the Bootstrap CSS gets applied first, so the custom lines overwrite the bootstrap CSS in this case, and it works.
If someone could explain to me in the comments, why the bootstrap float: left statement does not work, but the custom float: left; actually does, it would be great!
.blue {
border: 10px solid #fff;
background: blue;
height: 150px;
float: left;
}
.red {
border: 10px solid #fff;
background: red;
height: 300px;
float: right;
}
#media screen and (max-width: 768px) {
.red, .blue {
float: none;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="outer">
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 red">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
</div>
Just use in the style css the parameter:
<div style="float: inside"></div>
You can put in the float: any of the parameters suits better for you.
You can try this Html
<div class="outer">
<div c3ass="row">
<div class="col-lg-6 col-sm-12 col-md-6" style="background-color:red;height:100px;border:1px solid black;">
</div>
<div class="col-lg-6 col-sm-12 col-md-6" style="background-color:red;height:100px;border:1px solid black;">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-12 col-md-6">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12" style="background-color:red;height:100px;border:1px solid black;">
</div>
<div class="col-lg-12 col-sm-12 col-md-12"style="background-color:red;height:100px;border:1px solid black;" >
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12" style="background-color:pink;height:200px;border:1px solid black;">
</div>
</div>
</div>
</div>
</div>
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
I am trying to do the following:
There are multiple "title" and "text" divs on a page.
Upon loading the page only the first text is visible.
When clicking on any title, its text slides down and all other texts slide up.
So far I came up with the following:
HTML:
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
jQuery:
$('.title').click(function () {
$(this).next().slideToggle();
})
https://jsfiddle.net/e3okos3e/
However, this is very basic.
Can you tell me how to select every text other than the selected title's one?
How to make only the first one visible at loading?
So, if all of the text divs are hidden by default, then do this:
$(document).ready(function(){
$('.title').click(function () {
$('.active').slideToggle().removeClass('active');
$(this).next().slideToggle().addClass('active');
})
});
.title {
width: 100px;
height: 20px;
border: 1px solid #cc0;
}
.text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text1</div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text2</div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text3</div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text4</div>
</div>
Fairly straightforward using not()
var $text = $('.text');// cache elements
$('.title').click(function () {
var $next = $(this).next().slideDown();// or slideToggle()
$text.not($next).slideUp();
});
DEMO