I want to have two columns which fills up every time the full page size unattached from the given content.
The problem is that my solutions work until I began to scroll the page.
Example
html,body {
height: 100%;
min-height: 100%;
}
.left-content {
background: red;
}
.right-content {
background: green;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
[class^="col-"] {
height: 100%;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 left-content">
LEFT COLUMN
</div>
<div class="col-sm-6 right-content">
RIGHT COLUMN
</div>
</div>
</div>
Anyone have a solution for this problem?!
How about adding col-xs-6 that accommodates extra small screens as well:
html,body {
height: 100%;
min-height: 100%;
}
.left-content {
background: red;
}
.right-content {
background: green;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
[class^="col-"] {
height: 100%;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-6 left-content">
LEFT COLUMN
</div>
<div class="col-md-6 col-xs-6 right-content">
RIGHT COLUMN
</div>
</div>
</div>
Related
I have a requirement where I have to create 2 fixed width panels, one on right and one on left and I have to keep the center component responsive according to bootstrap classes.
I did something like this
Styles file
.c-row {
max-width: 100%;
margin: 0 auto;
}
.c-row .c-col-left {
width: 260px;
}
.c-row [class^='c-'] {
float: left;
height: 90vh;
background-color: white;
}
.c-row .c-col-center {
background-color: #e6e7fb;
width: calc(100% - (260px + 350px));
}
.c-row .c-col-right {
width: 350px;
}
Markup
<div class="c-row">
<div class="c-left">content</div>
<div class="c-center">
<div class="row">
<div class="col-md-6">c1</div>
<div class="col-md-6">c2</div>
</div>
</div>
<div class="c-right">content</div>
</div>
So my problem here is: The grid inside center class isn't working, it works fine if I remove the style width: calc(100% - (260px + 350px)); from center column.
is there any way I can still make it work without changing the custom grid outside?
Use flexbox which is integral to Bootstrap 4
.c-row {
max-width: 100%;
margin: 0 auto;
display: flex;
}
.c-row .c-left {
flex: 0 0 260px;
background: pink;
}
.c-row [class^='c-'] {
height: 90vh;
}
.c-row .c-center {
background-color: #e6e7fb;
flex: 1;
}
.c-row .c-right {
flex: 0 0 350px;
background: lightblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="c-row">
<div class="c-left">content</div>
<div class="c-center">
<div class="row">
<div class="col-md-6">c1</div>
<div class="col-md-6">c2</div>
</div>
</div>
<div class="c-right">content</div>
</div>
Codepen Demo
You can do it without custom flexbox use but only with the Bootstrap grid.
.col,
[class*="col-"] {
min-height: 90vh !important;
}
.c-left {
width: 260px !important;
background: lightpink;
}
.c-center-1 {
background-color: lightcoral;
}
.c-center-2 {
background-color: lightskyblue;
}
.c-right {
width: 350px !important;
background: lightblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="c-row row flex-nowrap">
<div class="col-auto c-left">content</div>
<div class="col c-center">
<div class="row">
<div class="col-md-6 c-center-1">c1</div>
<div class="col-md-6 c-center-2">c2</div>
</div>
</div>
<div class="col-auto c-right">content</div>
</div>
</div>
(some !important just because how SO snippets work, see codepen demo)
Codepen Demo
I created space between my bootstrap columns using columns insight columns. However, when I start resizing the window, the distance between the columns gets smaller and disappears eventually, both columns start overlapping ech other. How can I keep the space when resizing using bootstrap? Thanks!!!
http://jsfiddle.net/humotrj0/604/
HTML:
<header id="home">
<div class="container-fluid">
<div class="row center-block home_boxes_row">
<div class="col-sm-4">
<div class="col-xs-12 home_box_left">
<p>teststetsttsgdbdshchdchdchdfvhfvhfvndvhdvvf</p>
</div>
</div>
<div class="col-sm-4">
<div class="col-xs-12 home_box_right"></div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</header>
CSS:
#home {
height: 1100px;
background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
background-size: cover;
width: 100%;
.home_boxes_row {
margin-top: 200px;
.home_box_left {
width: 300px;
height: 300px;
background-color: $green;
padding: 5px;
}
.home_box_right {
width: 300px;
height: 300px;
background-color: $blue;
padding: 5px;
}
}
}
Boostrap is built with responsiveness in mind. Thereby, setting the width of the two columns to a pixel width, will in most cases break the layout. The width should rather be left to be handled by bootstrap.
The following snippets should provide you what you seek.
Spacing is achieved by creating a div inside of the columns, and then setting margins. I have added separate classes for this (.spacing_right and .spacing_left).
I have used Bootstrap 4, but it should work with Bootstrap 3 as well.
Note: bootstrap 4 has replaced the col-xs-* with col-*.
#home {
overflow: auto;
height: 1100px;
width: 100%;
background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
background-size: cover;
}
.home_boxes_row {
margin-top: 200px;
}
.home_box_left {
background-color: orange;
margin-top: 5px;
}
.home_box_right {
background-color: red;
margin-top: 5px;
}
.spacing_right {
height: 100%;
margin-right: 25px;
background-color: green;
}
.spacing_left {
height: 100%;
margin-left: 25px;
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header id="home">
<div class="container-fluid">
<div class="row home_boxes_row">
<div class="col-sm-6 col-6 home_box_left">
<div class="spacing_right">
<p>Test test teasdasdst</p>
</div>
</div>
<div class="col-sm-6 col-6 home_box_right">
<div class="spacing_left">
<p>Test test teasdasdst</p>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
I want display a set of images with a description below. I chose to use Ionic cards.
I got this result (the first image):
While I want to preserve the same layout I have now, and add a description.
Here is my code:
<ion-content ng-controller="cityController">
<div class="row">
<div class="col col-33">
<div class="list card">
<div class="item item-body">
<img class="full-image"src="img/images/opera.jpg"/>
This is a "Facebook" styled Card..
</div>
</div>
</div>
<div class="col col-33">
<img src="img/images/basilique.jpg"/>
</div>
<div class="col col-33">
<img src="img/images/hoteldeville.jpg"/>
</div>
</div>
.center {
text-align: center;
}
.col {
overflow: hidden;
}
.row {
overflow: hidden;
height: 180px;
}
.fullscreen {
width: 100%;
height: 100%;
}
How can I fix this?
UPDATE
You have to change your source little bit.
Example HTML:
<div class="row">
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_fjords.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_forest.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_mountains.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
</div>
Example CSS:
.col-33 {
width: 33%;
float:left;
}
.full-image {
width: 100%;
height: 100%;
}
.card-description {
text-align: center;
}
Live demo here
This is just an example how it can work.
UPDATE:
To have the images full sized, you need to put the description over it.
In that case this CSS is required.
.col-33 {
width: 33%;
float:left;
position: relative;
}
.full-image {
width: 100%;
height: 100%;
}
.card-description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 5px;
line-height: 1.5;
background-color: rgba(255, 255, 255, 0.6);
}
I'm building a site that has two section sizes.
The sizes are:
Full screen (height: 100%;)
Half screen (height: 50%;)
See screenshots:
Note the section with three columns (green, pink, blue).
This works before the columns collapse at col-md-4.
Once the columns collapse, they overflow their container (height: 50%) and then theres 3 columns at 50% height (150%) the extra 100% covers up the last section (100%).
How can I get the height to expand if the container overflows?
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #fff4fd;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.wrapper .content {
height: 100%;
width: 100%;
}
.home {
background-color: red;
background-attachment: fixed;
}
.what-we-do {
background-color: blue;
}
.our-work {
background-color: #93A8FF;
}
.our-ethos {
background-color: yellow;
}
.case-studies .row {
height: 100%;
margin: 0;
}
.case-studies .row > div {
height: 100%;
}
.case-studies .row > div.case-study-1 {
background-color: #D1F3F0;
}
.case-studies .row > div.case-study-2 {
background-color: #FFEBF1;
}
.case-studies .row > div.case-study-3 {
background-color: #D7EEF9;
}
.page.page-full {
height: 100%;
}
.page.page-half {
height: 50%;
}
/*# sourceMappingURL=app.css.map */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="bower_components/modernizr/modernizr.js"></script>
<div class="wrapper">
<div class="content">
<div class="page page-full home"></div>
<div class="page page-half what-we-do"></div>
<div class="page page-half our-work"></div>
<div class="page page-half case-studies">
<div class="row">
<div class="col col-md-4 case-study-1"></div>
<div class="col col-md-4 case-study-2"></div>
<div class="col col-md-4 case-study-3"></div>
</div>
<div class="cleafix"></div>
</div>
<div class="cleafix"></div>
<div class="page page-full our-ethos clearfix"></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
See screenshot:
My page is divided in rows with limited width. (<div class='row'>)
I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?
Thanks!
Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.
I came to this solution:
<div class="row1">
...
</div>
<div class="row2">
...
</div>
.row1 {
background-color: red;
width: 100%;
height: 50%;
}
.row2 {
background-color: pink;
width: 100%;
height: 50%;
}
You can run it here: JSFiddle
This is possible with a pseudo-element, no need for additional HTML.
.wrapper {
width: 50%;
margin: auto;
}
[class^=row] {
height: 50px;
position: relative;
margin-bottom: 10px;
}
[class^=row]:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100vw;
background: purple;
z-index: -1;
}
.row1 {
background-color: red;
}
.row2 {
background-color: pink;
}
<div class="wrapper">
<div class="row1">...</div>
<div class="row2">...</div>
</div>
You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need
.container-fluid {
min-width: 100%
}
.row {
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container-fluid red">
<div class="row">
<p>Row Content 1</p>
</div>
</div>
<div class="container-fluid green">
<div class="row">
<p>Row Content 2</p>
</div>
</div>
<div class="container-fluid blue">
<div class="row">
<p>Row Content 3</p>
</div>
</div>