Here is an example of my issue: JS Fiddle
I have something like the following:
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<div class="row">
<div class="col-xs-12">
<div class="big-box">image</div>
</div>
</div>
</div>
</div>
I want the inner <div class="col-xs12"> to be the default size for the container. But the 'parent' div is taking over (as expected). How can I stop this without removing the parent?
In the JS Fiddle you can see what I am attempting to do.
I fixed this by doing the following:
.col-sm-expand-2 {
width: 120%;
margin-left: -10%;
}
Updated JSFiddle
Related
How can I make a column within a row have a "col-6" with a "container" and in another "col-6" have a "container-fluid". Sort of like the picture. The code I tried to make is below.
HTML
<div class="main">
<div class="container">
<div class="row">
<div class="col-sm-6 c-1">
<div class="container">
<div class="row">
<div class="teste col-sm-12">aaaaa</div>
</div>
</div>
</div>
<div class="col-sm-6 c-2">
<div class="fluid-container">
<div class="row">
<div class="teste2 col-sm-12">aaa</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.col-sm-6 {
height: 700px;
}
.c-1 {
background: #ccc;
}
.c-2 {
background: #ddd;
}
.teste {
background: cyan;
}
.teste2 {
background: blue;
}
Below, as i hope be
I recently came across this problem myself. Depending on which version you are on Bootstrap (I used latest Bootstrap 4.4) you can take a look at what I did in a recent project here: https://www.codeply.com/p/0ZqAg6HUHX
I offset the columns to display the column on the right in full width. The code is responsive as well and breaks on mobile view.
The reason this works is because offsetting columns will be pushed to one side. Then add a class of p-0 to the column and you'll have a full width column with no padding.
You can check the documentation for more info on this part:
https://getbootstrap.com/docs/4.4/layout/grid/#offsetting-columns
I have a bootstrap grid layout but the row is not occupying 100% width. I am using Bootstrap 4 alpha 6. Here is the HTML:
<div class="container-fluid">
<h1 class="center-text" id="heading">[Enter Heaading Here]</h1>
<div class="container">
<div height="100px" class="row border-show">
<div class="col-4" id="one"></div>
<div class="col-4" id="two"></div>
<div class="col-4" id="three"></div>
</div>
</div>
</div>
Here is the CSS:
.center-text{
text-align: center;
}
#heading{
padding: 60px;
}
.border-show{
border-style: solid;
border-color: black;
}
In case someone else comes across this and the answer doesn't solve their problem, my issue that was causing this was because I didn't realize I was adding a row and trying to set up columns in a Bootstrap navbar. navbar already has a grid-like system in it by default, so it seems you are pushing it over the edge if you try to add columns inside of it. They aren't necessary anyway.
So if this answer doesn't solve your problem, check to see if you are inside of another Bootstrap component that already handles spacing. You may be trying to double-delimit your content!
Remove it from the container. The container is not 100% width, and shouldn't be nested in another container.
The container class has this effect.
<div class="container">
<div class="row">
<div class="col-12">
div into <b>container</b> class
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
div into <b>container-fluid</b> class
</div>
</div>
</div>
This code will generate following image:
In my case even container-fluid also didnot work because I used row class with the container-fluid in the same div. So, I removed the row class from the parent div and inside that I created a child div and used row class. Then it worked.
<div class="container-fluid row">
<div class="col-12">
didn't work
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
worked
</div>
</div>
</div>
I was trying to make three equal columns in js fiddle and they display as separate rows for some reason. What have I done wrong?
JSFiddle
<div class="container">
<div class="row">
<div class="col-md-4">
cczfsd
</div>
<div class="col-md-4">
sfdfds
</div>
<div class="col-md-4">
sdfssd
</div>
</div>
</div>
hi as your is working perfect for the desktop screens properly it is not working for the mobile,tablet and other small resolution devices so that you can't getting done your output
i think there is no issue of including the bootstrap's css again because it's already loaded i think issue is with this of managing the screen wise
here is the code may you want the output please look it out'
.temp{
background-color:#e2e2e2;
border:1px solid grey;
}
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4 temp">
cczfsd
</div>
<div class="col-md-4 col-xs-4 col-sm-4 temp">
sfdfds
</div>
<div class="col-md-4 col-xs-4 col-sm-4 temp">
sdfssd
</div>
</div>
</div>
and here is the demo working code for this
DEMO CODE
In this case, flex display would come in handy.
<div class="container">
<div class="row">
<div>cczfsd</div>
<div>sfdfds</div>
<div>sdfssd</div>
</div>
</div>
CSS
.row {
display:flex;
}
If you are not using boostrap, add following css to get the correct output.
.col-md-4 {
width: 33.3333%;
float:left;
}
JsFiddle
Make sure whether you have included bootstrap css properly in that html else check that link is working properly.
Add bootstrap in fidlle
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
Then re-size the output box.` Works as intended.
I have managed to create a page that looks like this:
<div class="container">
<div class="row fullscreen">
<div class="col-md-6 pink-panel">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 gray-panel">
</div>
</div>
<div class="row">
<div class="col-md-6 orange-panel">
</div>
<div class="col-md-6 black-panel">
</div>
</div>
</div>
</div>
</div>
You can view it here
The problem I have is that I would like to have a small margin between each panel (right and top). If I add top margin I get this:
http://codepen.io/r3plica/pen/jPVQqy
which you can see makes the rows not line up anymore, which is not what I want. Similarly, if I add a right margin, predictably I get this:
http://codepen.io/r3plica/pen/NqbErr
Now I know the reason for both these issues. I could try and write some JavaScript to help me fix the issue, but I would prefer to solve this in pure CSS.
Has anyone encountered this issue before and solved it?
you could nest your color-panels
<div class="container">
<div class="row fullscreen">
<div class="col-md-6">
<div class="col-md-12">
<div class="pink-panel">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="gray-panel">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="orange-panel">
</div>
</div>
<div class="col-md-6">
<div class="black-panel">
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/0z76regv/
You must remember that bootstrap uses specific margins and paddings for its layout (e.g. negative margins for row classes) To fit elements in desired way you should remember that each col-* block has its width described in percentage.
I would suggest two solutions:
Overloading default percentage for columns if you don't mind changing 5px to arbitrary values. You could e.g. set col-md-6 classes to use only 49.5% of its width and remaining 0.5% for margins.
http://codepen.io/anon/pen/QbGJgp
.col-md-6 {
width: 49.5%;
margin-right: 0.5%;
}
.row {
margin-bottom: 0.5%;
}
Using calc() function to substract aforementioned 5px from proper elements. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/calc, however this functionality isn't very compatible with older browsers: http://caniuse.com/#feat=calc.
http://codepen.io/anon/pen/yNVQoz
.col-md-6 {
width: calc(50% - 5px);
margin-right: 5px;
}
I would like to know how easilly achieve this layout with Bootstrap 3.
You can achieve that layout using bootstrap 3 pretty easy, you just have to arrange your columns in a proper order. The orange~red block I believe its a sidebar, and the other two blocks have the same width (seems bound to the same container), and I think there you have your content.
So, put the sidebar block, in a container with the desired width from the bootstrap grid, like col-md-4, and the content block in a container say col-md-8; add to both these containers col-xs-12 class(will add 100% width on 768px and bellow), we'll need it because we're gonna use pull-left/right(float rule) class to swap them around.
Check out the demo and bellow the markup/css used
The markup:
<div class="container">
<div class='row cf'>
<div class='col-sm-4 col-xs-12 pull-right'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12 pull-left'>
<div class='content-entry orchid'>
Some content here
</div>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
And the css:
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
**Note: if you want that sidebar to expand it's height to the height of the other 2 blocks combined, that's a different story, but this should get you started.
UPDATE 2
OK since you have a layout a bit tricky on mobile, I guess your safest bet would be to make the sidebar absolute positioned, and on mobile(bellow and 767px), switch it to static position, to make em fall into a natural flow. There are some more other methods out there like flexbox, or maybe some fancy table tricks, but this one should get you going.
Check out the demo, and the changed markup/css bellow:
<div class="container">
<div class='row content-wrapper'>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry orchid'>
Some content here
</div>
</div>
<div class='col-sm-4 col-xs-12 sidebar-wrapper'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
/*added rules*/
.content-wrapper{
position: relative;
}
.sidebar-wrapper{
position: absolute;
top: 0; right: 0;
}
#media all and (max-width: 767px){
.sidebar-wrapper{
position: static;
}
}
Have a look here, I think the .col-md-8 and .col-md-4 classes will be interesting for you.
Since stack Overflow will not do any project i posted you simple and easy step
Bootstrap use media-queries
example
#media screen and (max-width: 500px) {
div {
width: 80%
}
}
this above query works if screen is bellow 500px div width will be 80%
try this example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
#media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Above example will show when screen size is bellow 600px page color will change from lightgreen to lightblue
<body class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">orange</div>
<div class="col-sm-6 col-xs-12">
<div class="row">violet row</div>
<div class="row">light blue</div>
</div>
</div>
</body>
I used xs-12 for the mobile. Please post your example code next time.
Thank you for all your answers.
Here's what i've made with the help of all answers :
<div class="container">
<div class="row">
<div class="col-sm-8 bg-info">
<h4>Content 1</h4>
</div>
<div class="col-sm-4 bg-warning pull-right">
<h4>Sidebar</h4>
</div>
<div class="col-sm-8 bg-success pull-left">
<h4>Content 2</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>