I desinged my personal webpage in non-responsive way, it's shaped to be properly displayed #1920x1080 screen. Now, I want it to be responsive, so I began my adventure with Bootstrap. I know that columns must sum to 12, but my webpage has it content in 2 divs, 100% wide each (visit my website and scroll to the right to see what I'm talking about).
My question is - how to port that layout to my responsive project? Is there any way to put 2 container-fluid divs in one row?
Add a wrapper, give it 200vw width and display: flex
html, body {
margin: 0;
}
.wrapper {
width: 200vw;
display: flex;
}
.container-fluid {
flex: 1;
background: lightgray
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
First
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
Second
</div>
</div>
</div>
</div>
or display: inline-block
html, body {
margin: 0;
}
.wrapper {
white-space: nowrap;
}
.container-fluid {
display: inline-block;
width: 100%;
background: lightgray;
white-space: normal;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
First
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
Second
</div>
</div>
</div>
</div>
The row must be in container-fluid and not the opposite. To create two div 100% wide you can:
<section class="container-fluid">
<div class="row">
<div class="col-xs-12">
First div 100% width for all device
</div>
</div>
<div class="row">
<div class="col-xs-12">
Second div 100% width for all device
</div>
</div>
</section>
Related
I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
I'm building a sidebar using the grid system in Bootstrap 4, and the Flexbox utility. For the most part, I have it working, except that I would like to have the sidebar be "static," that is, it should not move when the user scrolls on the page next to it.
I attempted to do this by adding position:fixed to it, but when I did that, the column the sidebar was in was reduced in size to the length of the longest string that was there.
How do I make the sidebar stay fixed in place, while maintaining column width?
Here's my code: (It's a React app, so "class" is replaced with "className")
Parent component:
{ this.state.isLoggedIn ?
<div className="row h-100">
<div className="col-2 no-padding-right">
<Sidebar />
</div>
<div className="col-10 no-padding-left">
<Main />
</div>
</div> :
<Main />
}
The sidebar itself:
<div className="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div className="p-2">
Week 11
</div>
<div className="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div className="p-2">Current Features</div>
<div className="p-2">Feature Request</div>
<div className="p-2">Settings</div>
<div className="p-2">Billing</div>
<div className="p-2">Log Out</div>
</div>
And the relevant piece of CSS:
.sidebar-left {
padding-top: 83px;
position: fixed;
}
Thanks!
Apply the max-width to the sidebar-left is equal to how much your col have.
.sidebar-left {
max-width: 16.666667%;
}
Stack Snippet
body {
margin: 0;
}
.sidebar-left {
font: 13px Verdana;
padding-top: 83px;
position: fixed;
background: red;
max-width: 16.666667%;
left: 0;
top: 0;
overflow: auto;
}
.p-2 {
word-break: break-word;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="row h-100">
<div class="col-2 no-padding-right">
<div class="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div class="p-2">
Week 11
</div>
<div class="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div class="p-2">Current Features</div>
<div class="p-2">Feature Request</div>
<div class="p-2">Settings</div>
<div class="p-2">Billing</div>
<div class="p-2">Log Out</div>
</div>
</div>
<div class="col-10 no-padding-left">
<div class="main"></div>
</div>
</div>
I'm trying to achieve a layout like below in Bootstrap but am having a difficult time with it. I feel dumb asking this but it's my first time using Bootstrap and I couldn't find a similar example on here.
Thanks!
I thought maybe something like this, but div C clears div B and ends up way too far down the page.
<div class="container">
<div class="row">
<div class="col-md-8">
A
</div>
<div class="col-md-4">
B
</div>
</div>
<div class="row">
<div class="col-md-8">
C
</div>
</div>
</div>
If you need a pure bootstrap solution you need to add col-xs-12 to make it 100% on mobiles and col-sm-6 to make it 50% on desktop. The add pull-left and pull-right to avoid the B panel to clear and move C below everything
.bg-danger, .bg-primary {
height: 200px;
}
.bg-success {
height: 400px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row container-fluid">
<div class="col-sm-6 col-xs-12 bg-danger pull-left"></div>
<div class="col-sm-6 col-xs-12 bg-success pull-right"></div>
<div class="col-sm-6 col-xs-12 bg-primary pull-left"></div>
</div>
</div></body>
</html>
Click full page to see the difference
Here we have an explanation about the grid system.
http://getbootstrap.com/css/#grid
Here's a simple solution:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
</div>
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
The page is split in half with the two outer columns "col-sm-6", with one of these columns containing two inner columns that span it's entire width
A simple solution if you want essentailly the green box to come in between.
Check this Bootply for responsive-ness check.
Snippet here:
.something {
height: 100px;
margin-top: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="something bg-danger"></div>
</div>
<div class="col-md-6">
<div class="something bg-success"></div>
</div>
<div class="col-md-6">
<div class="something bg-primary"></div>
</div>
</div>
</div>
Here is another example where the Green box will come below the rest two boxes..:
.something {
height: 100px;
margin-top: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div clas="col-md-6">
<div class="col-md-12">
<div class="something bg-danger"></div>
</div>
<div class="col-md-12">
<div class="something bg-primary"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="something bg-success"></div>
</div>
</div>
</div>
You should use Pure CSS Flexbox for this.
Have a look at the snippet below (use full screen for desktop mode):
.box-holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 280px;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid #000;
color: #fff;
margin: 15px;
font-size: 40px;
font-weight: 200;
}
.a {
background: red;
}
.b {
align-self: flex-start;
order: 1;
background: green;
height: 240px;
margin: 0;
}
.c {
background: blue;
}
/* On Mobiles */
#media screen and (max-width: 700px) {
.box-holder {
width: auto;
height: auto;
}
.b {
align-self: center !important;
order: 0;
margin: 15px;
}
}
<div class="box-holder">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
</div>
Hope this helps!
I hope this helps..:)
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3"><!--div for the left side abc pattern starts-->
<div class="row">
<div class="col-sm-12">
"standing a"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"standing b - adjust the height of this block"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"standing c"
</div>
</div>
</div><!-- div for the left side abc pattern ends -->
<div class="col-sm-6"><!-- div for the right side abc pattern starts -->
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
"block a"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"block b"
</div>
</div>
</div>
<div class="col-sm-6">
"block c"
</div>
</div>
</div><!-- div for the right side abc pattern ends -->
</div><!-- row closed here -->
</div>
I want to place a png as a background image for a div that acts as a placeholder:
https://jsbin.com/hohegiyazu/edit?html,css,output
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" rel="stylesheet">
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.placeholder {
background-image:url(/images/placeholder.png);
background-size:100% 100%;
height:50px;
flex:1;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
</div>
</div>
</body>
</html>
I get this effect:
The image is distorted according to the width of the element and the left and right margins are not equal.
I want to achieve this effect:
Is it possible?
One way is to change your background-size property to cover
.item {
background-size: cover;
}
It will make sure the image cover the full background, without stretch, though this still depends a lot on how the image actually looks like as well as how the element using it is set up.
Update after question edit
With positioning, i.e. center center, you can control what part of the image is of more value and have it centered or left aligned or ...
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.placeholder {
background: url(http://placehold.it/300) center center;
background-size: cover;
height:50px;
flex:1;
margin: 1px;
}
<div class="container">
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
</div>
</div>
Update after 2:nd question edit
You can use a pseudo element, no extra markup, with background color and rounded corners. This will save you the extra http request, load the page faster (which is really recommended) and you can easily change color and border.
And you can use an image if you really need one
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.placeholder {
position: relative;
height:50px;
flex:1;
margin: 1px;
padding: 5px;
color: red;
}
.placeholder::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 14px;
z-index: -1;
background: lightgray;
/* with image
background: url(http://placehold.it/300) center center / cover;
*/
}
<div class="container">
<div class="row">
<div class="placeholder">Hey, there</div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
</div>
</div>
The reason for this is that your PNG seem to include the white margins. So when you stretch it horizontally, the margins are proportionally stretched too and therefore become bigger.
I think you should use the border-image property as described here: https://css-tricks.com/understanding-border-image/
That way, you will be able to define which part of your image can be stretched and which part remains the same width/height, allowing you to keep corners and margins as you want them.
I downloaded Bootstrap 4, set $enable-flex true and recompiled.
I have a question about Bootstrap 4 and flexbox.
If you reduce the size of Twitter homepage, you can see that "Who to follow" part is moving from right to the left side of the site (but main feed doesn't get effected by that), and this is the thing I want to do using Bootstrap 4 and flexbox. So, when I resize the window (for a hypothetical size like sm), #right will start after #left. #middle is the feed section.
How can I do it?
Here's my current setup.
#left {
background: yellow;
}
#middle {
background: brown;
}
#right {
background: #a8d6fe;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2" id="left">
<div class="col-md-12">PROFILE</div>
<div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7" id="middle">NEWS</div>
<div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
</div>
</div>
Looks like you need a div with col- as a wrapper to order the flex items. Which makes sense, because only the flex items can be ordered. Not the flex container.
#import url('https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css');
[class*="col-"] {
display: flex;
flex-flow: row wrap;
}
#left{
background:yellow;
}
#middle {
background:brown;
order: 1;
}
#right {
background:#a8d6fe;
}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3 col-md-2" id="left">
<div class="col-md-12">PROFILE</div>
<div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7" id="middle">NEWS</div>
<div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
</div>
</div>
</div>