I want to wrap my col-*-5 with div.
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
<div class="wrapper">
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> content1 </div>
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> content2 </div>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
</div>
My wrapper has width as body and height = 1. I tried to add overflow: hidden; In this case div wrapps my cols-5 but last col-1 is moving to the next line (wrapper does not end after second col-5, it goes to the end of page).
The wrapper should have bootstrap width class, perhaps col-xs-10. Then the inners xs-6 etc?
.col-xs-1 {
border: 1px solid red;
}
.wrapper {
border: 1px solid grey;
text-align: center;
background: #bada55;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">col1</div>
<div class="wrapper col-xs-10 col-sm-10 col-md-10 col-lg-10">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">content1</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">content2</div>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">col1</div>
</div>
Related
Be a hard one to explain so I hope that I will provide enough descriptive information. I have a header which takes advantage of the profile container function and also using the profile-stats with stats-col. Currently, it is laid out as the following but I would like to modify it so the lines are consistent and go straight down.
My code for that is the following:
.profile-container .profile-header .profile-stats .stats-col:not(:last-child) {
border-right: 1px solid #eeeeee;
}
.profile-container .profile-header .profile-stats .stats-col .stats-value {
display: block;
margin: 0 auto;
text-align: center;
font-size: 30px;
font-family: 'Open Sans', 'Segoe UI';
HTML
<div ng-hide="isNewSite">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="col-xs-6 col-md-6 text-align-left no-padding-left">
<h4>Site Entitlements View</h4>
</div>
<div class="pull-right">
<button class="btn btn-sky" ng-click="toggleButtonFunctionality()">
{{editButtonText}}
</button>
<button class="btn btn-darkorange" ng-click="handleDelete()" title="{{disableDeletionReason}}">
Delete Site
</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="profile-container">
<div class="profile-header row">
<div class="col-lg-2 col-md-4 col-sm-12 text-center">
<img src="assets/img/PICTURE.png" alt="" class="header-avatar"/>
</div>
<div class="col-lg-5 col-md-8 col-sm-12 profile-info">
<div class="header-fullname">{{targetEntity.siteName}}</div>
<span ng-bind-html="renderEntityState(targetEntity.status)"></span>
<div class="header-information" style="font-size:15px">
{{targetEntity.address1}}
<br>{{targetEntity.city}} </br>
{{targetEntity.postCode}}
<br>{{targetEntity.country}} </br>
</div>
</div>
<div class="col-lg-5 col-md-12 col-sm-12 col-xs-12 profile-stats">
<div class="row" >
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col" >
<div class="stats-value purple">{{serviceTotal}}</div>
<div class="stats-title">SERVICES</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
<div class="stats-value purple">{{siteSubjectsTotal}}</div>
<div class="stats-title">SUBJECTS</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
<div class="stats-value purple">
<a ui-sref="app.client-details({clientId:entity.clientIdId})"
ui-sref-active="active" class="purple">{{targetEntity.clientName}}
</a>
</div>
<div class="stats-title">CLIENT</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I do know that if I remove the .stats.-col then it does become consistent in the look but I still want the space between the values.
So I am wondering does anyone know what I could do? If you need further explanation I am happy to help.
Hi guys I'm using bootstrap 3 and trying to crate this effect here :
However i cant seem to create this using bootstrap at all Mine keep lying under each other, Any help on recreating this format would be great
HTML:
<div id="night">
<div class="container">
<div class="row">
<div class="col-xs-3 col-md-6 first">
<p>a</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
</div>
</div>
</div>
css:
.first {
border-style: solid;
border-color: red;
}
Thanks
Try this please
<div id="night">
<div class="container">
<div class="row">
<div class="col-md-4 first">
<div class="second">a</div>
</div>
<div class="col-md-4 first">
<div class="third">a</div>
<div class="third">a</div>
</div>
<div class="col-md-4 first">
<div class="third">a</div>
<div class="third">a</div>
</div>
</div>
</div>
</div>
CSS:
.first {
border-style: solid;
border-color: red;
}
.second {
border-style: solid;
border-color: blue;
display: block;
height: 400px;
}
.third {
border-style: solid;
border-color: blue;
display: block;
height: 200px;
}
This works in full page, maybe you can work with this aproximation:
<div class="container">
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
1
</div>
<div class="col-sm-8" style="background-color:pink;">
<div class="row">
<div class="col-sm-6" style="background-color:blue;">
2
</div>
<div class="col-sm-6" style="background-color:red;">
3
</div>
<div class="col-sm-6" style="background-color:green;">
4
</div>
<div class="col-sm-6" style="background-color:black;">
5
</div>
</div>
</div>
</div>
</div>
I want to create a full width layout with a blue halft on the left and a red half on the right.
After that I want to add text inside the layout but inside a container.
Is this possible?
EDIT: you can see, that the green container has a different size than the col-6 inside the blue and red half.
* {
color: white;
}
.blue-half {
background: blue;
}
.red-half {
background: red;
}
.green {
background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container green">
I am the normal container!
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am first half of the blue container!
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am second half of the blue container!
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am first half of the red container!
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am second half of the blue container!
</div>
</div>
</div>
</div>
</div>
</div>
Variant 2. Divide the container into two parts
You can define a new class for each half of the container. But in this solution you needs to control that the two halves have the same height.
.blue { background: blue; color: white; }
.red { background: red; color: white; }
.container-left-half,
.container-right-half {
padding-right: 15px;
padding-left: 15px;
}
.container-left-half {
margin-right: 0;
margin-left: auto;
}
.container-right-half {
margin-right: auto;
margin-left: 0;
}
#media (min-width: 768px) {
.container-left-half,
.container-right-half {
width: 375px;
}
}
#media (min-width: 992px) {
.container-left-half,
.container-right-half {
width: 485px;
}
}
#media (min-width: 1200px) {
.container-left-half,
.container-right-half {
width: 585px;
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 blue">
<div class="container-left-half">
<div class="row">
<div class="col-xs-12">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
</div>
</div>
</div>
<div class="col-xs-6 red">
<div class="container-right-half">
<div class="row">
<div class="col-xs-12">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
</div>
</div>
</div>
</div>
</div>
Variant 1. Linear-gradient & matryoshka
1) You can use the linear-gradient() function to make two-colored background.
2) Bootstrap has rows and two types of containers:
Use .container for a responsive fixed width container.
Use .container-fluid for a full width container, spanning the entire width of your viewport.
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
3) So you can make a matryoshka:
.container-fluid > .row with linear-gradient > .container > .row with content
Matryoshka is a set of brightly painted hollow wooden dolls of varying sizes, designed to nest inside one another.
4) col-xs-6 is equivalent to col-xs-6 col-sm-6 col-md-6 col-lg-6.
.two-colors {
background: linear-gradient(to right, blue 50%, red 50%);
color: white;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row two-colors">
<div class="container">
<div class="row">
<div class="col-xs-6">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
<div class="col-xs-6">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
</div>
</div>
</div>
</div>
Try this
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 blue">
<div class="container">
<!--content-->
</div>
</div>
<div class="col-xs-6 red">
<div class="container">
<!--content-->
</div>
</div>
</div>
CSS
.red{
background: red;
}
.blue{
background: blue;
}
Something like this?
* { color: white; }
.blue-half {
background: blue;
}
.red-half {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am first half of the blue container!
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am second half of the blue container!
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am first half of the red container!
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am second half of the red container!
</div>
</div>
</div>
</div>
</div>
</div>
Update
I attempted to create what I was reading from your comment regrading the formatting not being quite right
Update 2
.row-green {
background: green;
color: white;
}
.blue-half {
background: blue;
color: white;
}
.red-half {
background: red;
color: white;
}
.option1 .row .container {
padding: 0;
}
.option2 .container.unindent {
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid option1">
<h3>Option 1</h3>
<p>
This uses a .row .container selector rule to enforece the padding removal on containers nested in rows.
</p>
<div class="row row-green">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I am the row above!
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I am the blue container!
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I am the red container!
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid option2">
<h3>Option 2</h3>
<p>
This uses an unindent CSS class on the containers that need to have the padding removed
</p>
<div class="row row-green">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I am the row above!
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
<div class="container unindent">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I am the blue container!
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
<div class="container unindent">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I am the red container!
</div>
</div>
</div>
</div>
</div>
</div>
Try this:
<div class="container">
<div class="row">
<div class="col-md-6">Left Column</div>
<div class="col-md-6 col-expand">Right Column</div>
</div>
</div>
CSS:
.col-expand {
position: absolute;
background-color: orange;
width: 100%;
right: 0px;
}
I have a carousel, and 2 rows in bootstrap. The layout is fine in standard view but when it goes into mobile queries the page layout becomes messed up. The 2nd row seems to overlap the blue column and i am not sure why.
https://jsfiddle.net/ydcategd/
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-lg-4 one">
<p>123</p>
</div>
<div class="col-lg-4 two">
<p>456</p>
</div>
<div class="col-lg-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
</div>
You should target mobile devices first if you want mobile responsiveness
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-xs-4 one">
<p>123</p>
</div>
<div class="col-xs-4 two">
<p>456</p>
</div>
<div class="col-xs-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-xs-4 four">
</div>
<div class="col-xs-4 four">
</div>
<div class="col-xs-4 four">
</div>
</div>
Based on your updates check this fiddle
Here is your fix:
HTML:
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-lg-4 one">
<p>123</p>
</div>
<div class="col-lg-4 two">
<p>456</p>
</div>
<div class="col-lg-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
</div>
CSS:
html, body{
height: 100%;
}
.carousel, .item, .active, .carousel-inner{
height: 100%;
}
.item>div{
width: 100%;
height: 100%;
}
.item:nth-child(1) > div {
background-color: yellow;
}
.box{
width: 100%;
height: 100%;
position:absolute;
top:100%;
}
#triple{
height: auto;
}
.col-lg-4 {
height:100%;
}
.one, .two, .three{height: 50vh;}
.one{ background-color:red;}
.two{ background-color:blue;}
.three{ background-color:green;}
.four{ background-color:orange;}
#single{
height:50%;
border:1px solid black;
}
#media (max-width: 767px){
.one, .two, .three{height: 100vh;}
}
Fiddle: https://jsfiddle.net/vsk59tck/1/
My CSS isn't picking up my different columns. They are stacked on top of each other. I want each of them each to span 4 columns of the same row.
<div class="container">
<div class="row">
<div class="col-md-4" id="directionsPanel1">
<h3 class="directions-discription" id="directions-info1"></h3>
</div>
<div class="col-md-4" id="directionsPanel2">
<h3 class="directions-discription" id="directions-info2"></h3>
</div>
<div class="col-md-4" id="directionsPanel3">
<h3 class="directions-discription" id="directions-info3"></h3>
</div>
How about this using floats. You can apply the float which is the pull-left helper class to the div.col-md-4 and then they won't stack upon each other.
Updated JS fiddle but you shouldn't need to float left in the CSS, couldn't get JS fiddle to pull bootstrap stuff. http://jsfiddle.net/4xEPr/7/
<div class="container">
<div class="row">
<div class="col-md-4 pull-left" id="directionsPanel1">
<h3 class="directions-discription" id="directions-info1"></h3>
</div>
<div class="col-md-4 pull-left" id="directionsPanel2">
<h3 class="directions-discription" id="directions-info2"></h3>
</div>
<div class="col-md-4 pull-left" id="directionsPanel3">
<h3 class="directions-discription" id="directions-info3"></h3>
</div>
AND CSS
div.col-md-4 {
border: 1px solid #333;
width: 200px;
background-color: red;;
}