I have a div inside a Bootstrap container-fluid like so:
<div class="container-fluid">
<div class="col-md-12 myDiv">
</div>
</div>
My CSS:
.myDiv {
height: 200px;
background-color: red;
}
But of course, the background of myDiv doesn't go all the way to the edges of the view, since container-fluid has padding/margin on it. Anyway to over come this?
If you want to use bootstrap element then use class row so it will overcome the issue of container-fluid or else you can use custom class(in my case .pd_none).
With row demo
.myDiv {
height: 200px;
background-color: red;
}
HTML:
<div class="container-fluid">
<div class="col-md-12 myDiv row"></div>
</div>
With custom class
.myDiv {
height: 200px;
background-color: red;
}
.pd_none{padding:0px !important;margin:0px !important;}
HTML:
<div class="container-fluid pd_none">
<div class="col-md-12 myDiv ">
</div>
</div>
For more detail here is link
You can simply override your div (not a good practice to override the divs of bootstrap, but if requirement says then we need to )
.col-md-12.myDiv{
margin:0px;
padding:0;
}
And this shall work.
{By default 15px pad is added on each side of the col by default}
Related
I want to display it like this:
.
However the container wont center / cover the entire screen for the other columns to be side by side (I left out the left/right column in css, because I'm trying to find out how to make it work + the container just defaults to the top left of the screen.) Also how do I get them side by side like the layout, inside the entire screen container?
#container {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
color: #eee;
font-size: 30px;
font-weight: bold;
letter-spacing: 4px;
}
<div class="container">
<div id="leftColumn">
<div class="center">
<h1 class="title">requiem.moe</h1>
<div id="center_wrap">
<div id="yt">
> youtube <
</div>
<div id="steam">
> steam <
</div>
<div id="hub">
> old theme+hub <
</div>
<div id="sharex">
> New ShareX Server <
</div>
<div id="tracks">
tracklist N/A
</div>
<div id="user">
user system N/A
</div>
<div id="aura">
aura sys TBA
</div>
</div>
<div id="rightColumn">
test
</div>
</div>
</div>
</div>
You put the rightColumn inside the leftColumn.
I recommend you using FlexBox. This is modern and most wanted.
* {
padding: 0;
margin: 0;
box-sizing: border-box
}
.container {
width: 100vw;
height: 100vh;
display: flex;
border: 2px solid black
}
.container #leftColumn {
width: 25%;
height: 100%;
background-color: green;
}
.container #rightColumn {
width: 75%;
height: 100%;
background-color: red
}
<div class="container">
<div id="leftColumn">
<div class="center">
<h1 class="title">requiem.moe</h1>
<div id="center_wrap">
<div id="yt">
> youtube <
</div>
<div id="steam">
> steam <
</div>
<div id="hub">
> old theme+hub <
</div>
<div id="sharex">
> New ShareX Server <
</div>
<div id="tracks">
tracklist N/A
</div>
<div id="user">
user system N/A
</div>
<div id="aura">
aura sys TBA
</div>
</div>
</div>
</div>
<div id="rightColumn">
test
</div>
</div>
assign display:flex; flex-direction: row; to your container class. they will cause the left column and right column display in a row.
Don't position your container at all. You even don't need your container. The body element of your html could be the container, but if you do want a container, you could add something like margin: auto (this will center anything relative to its parent element) and height: 100% with width: 100%.
Then, your left column could be something like display: block with width: 30% and your right column display: block with width 70%.
I would consider using a CSS grid layout for this though.
One thing you might find helpful is starting with something like TailwindCSS classes instead of writing your own CSS. It's a good way to learn the underlying CSS as well. For instance, here are the docs for height: 100%.
You can get started with Tailwind by simply including a link to their CND version of the Tailwind stylesheet in the head of your HTML document:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Use that as your "stylesheet reset" and start playing around with Tailwind layout properties and I think you'll have a better entry point into learning more complex CSS layout.
here is how to split to 2 parts:
.split {top:0; height:100%; position:absolute;}
.left {width:20%; left:0; background-color:purple;}
.right {width:80%; right:0; background-color:green;}
<div class="split left">
<p>something</p>
</div>
<div class="split right">
<p>something</p>
</div>
To split, you need to write 20% for the left part, and 80% to the right part (as you can see in the CSS).
both of the divs need to have full height (as you can see in the CSS).
I'm trying to teach myself how to effectively center things using bootstrap. Centering is something I really struggle with, even after reading a ton of other SO posts asking the same question.
Why do we have to wrap the cols in a row, and then wrap that row in a container? What does this actually do?
body {
background-color:pink;
}
.container {
overflow: hidden;
background-color: yellow;
}
.col-sm-6 {
float: left;
height: 100px;
width: 100px;
background-color: blue;
padding: 10px;
margin: 1%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "container">
<div class = "row">
<div class = "col-sm-6"></div>
<div class = "col-sm-6"></div>
</div>
</div>
JSFiddle
1 row have 12 cols for you're first code :
<div class = "container">
<div class = "row">
<div class = "col-sm-6"></div>
<div class = "col-sm-push-6"></div>
</div>
</div>
That means you're second div is after the first who takes 6 cols. So you push the second after the first (col-sm-push-6)
This is for the web-responsive, when you're website is on a computer or in a mobile phone, the screen have different size. Bootstrap adapt you're div to the screen.
They're is sm : for small screen, lg : for large screen and md : for middle screen like a tab for exemple.
Let me explain for you. I love to teach beginners :-)
Firstly when we use column of bootstrap it adds '15px' padding from
right and left. in this way our column looks like '15px' inside from
wall of container.
Secondly we use row to overcome the first situation given upper paragraph.
Thirdly if you are trying to align Centre 2 columns of 6 and 6 then it is impossible to do this because 2 col-sm-6
occupy whole container space.
Fourthly do r&d about bootstrap offset and push properties. also check bootstrap row and columns properties by using code inspector. thanks
If you use bootstrap, there is class ready made to build your layout :
https://getbootstrap.com/docs/4.0/utilities/flex/
Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
If you need cols of a fixed width, you might need to create your own class here .
example:https://jsfiddle.net/cLw2ajro/7/
body {
background-color: pink;
}
.container {
overflow: hidden;
background-color: yellow;
}
.mycol {
background-color: blue;
height:100px;
flex:0 0 100px
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row d-flex flex-nowrap justify-content-center">
<div class="mycol m-2 p-4"></div>
<div class="mycol m-2 p-4"></div>
</div>
</div>
Try this
CSS:
body {
background-color:pink;
}
.row-centered {
display:block;
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
}
.container {
overflow: hidden;
background-color: yellow;
}
.col-sm-6 {
height: 100px;
max-width:100px;
background-color: blue;
padding: 10px;
margin: 1%;
}
HTML
<div class = "container">
<div class = "row row-centered">
<div class = "col-sm-6 col-centered">-</div>
<div class = "col-sm-6 col-centered">-</div>
</div>
</div>
Fiddle
Source: This question
I'm planning to create a layout where one of the DIV is fixed using Bootstrap. However, the DIV is creating an undesirable effect.
JSFIDDLE: http://jsfiddle.net/cstoq3ec/
Here's the HTML
<div class="container">
<div class="row">
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="fixed">
hey
</div>
</div>
<div class="col-6">
<p class="scroll">
This is the scrollable section.
</p>
</div>
</div>
</div>
CSS:
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
}
.scroll {
height: 1000px;
background-color: grey;
color: #fff;
}
.simple {
background-color: grey;
color: #fff;
margin: 15px 0;
}
Notice how the red color DIV is extended all the way to the right side! I want it to stay within its DIV. How should I proceed?
You can't. that's why you have position:absolute.
Once you use position:fixed on an element you get it completely out of the HTML flow so it does not matter what their parents are and their size. You used width:100%so it's 100% of window width.
Is you wonder why, then, it is affected by parent padding (left and top margin), it is because you haven't set any "left, top, bottom or right value" and modern browsers automatically set the values based on the parent. use your own value to check as you can see here: FIDDLE
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
top:0;
left:0;
}
which, btw, in my opinion you should never rely on as You may have unexpected problems in some browsers. Once you use absolute or fixed position is highly recomend to set at least "top and left values".
If You need the fixed element same width as Your parent I would use javascript / Jquery so you calculate the width of the parent and then use the value to your fixed element.
This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed 7 years ago.
I am having trouble overriding the parent's width within my CSS.
Essentially, I have a parent and a child div like:
.parent{ width: 768px; background-color: red; }
.child{ background-color:blue; }
<div class="parent">
<div class="child">
//content
</div>
</div>
A lot of elements still use the parents parameter of 768px width, however I wish this one specific child element to extend the entire width of the screen - I have tried doing left: 0, right: 0, clearing the floats and setting the width to auto.
I also wanted to avoid using !important if I can.
Any suggestions ?
An accurate representation of what I want would look like this:
_____
|par. |
_|_____|_
| child |
| |
|_________|
| |
|_____|
Do this, use padding and margin (margin-left and margin-right and padding-left and padding-right) to achieve this.
<div class="parent">
<p>This is parent</p>
<div class="child">
<p>This is child</p>
</div>
<p>This is still parent</p>
</div>
.parent{ width: 468px; background-color: red; margin: 0 auto; }
.child{
background: blue;
margin-left: -300vw;
padding-left: 300vw;
margin-right: -300vw;
padding-right: 300vw;
}
http://cssdeck.com/labs/full/6xljy6pz
Try this https://jsfiddle.net/7txe5eev/. This will calculate and set margin for you. I assumed you are using bootstrap but if you get the logic you can modify this to fit your code.
HTML
<div class="container">
<div class="row">
<div class="col-xs-offset-3 col-xs-6 parent">
<div class="row">
<div class="col-xs-12 divs red"></div>
</div>
<div class="row">
<div class="col-xs-12 divs green special"></div>
</div>
<div class="row">
<div class="col-xs-12 divs blue"></div>
</div>
</div>
</div>
CSS
.divs {
height: 200px;
margin: 5px auto;
}
.red {
background-color: red;
}
.green {
background-color: green
}
.blue {
background-color: blue;
}
.special {
width: 100vw;
}
JS
$(document).ready(calcMargin);
$(window).resize(calcMargin);
function calcMargin() {
var width = $('.parent').width() - $('.special').width();
var leftMargin = width/2;
$('.special').css('margin-left', leftMargin);
}
Kind of hacky, but it works (in browsers that support calc and vw): http://jsfiddle.net/tvg2ocvs/
margin-left: calc(-50vw + (768px/2));
margin-right: calc(-50vw + (768px/2));
Doesn't look nice when viewport is smaller than 768px though, but nothing a media query won't fix :)
I want a small image on the top of the page, the logo to be precise. I have set up the bootstrap columns so that the two columns the image will span is center, but the image itself won't center within the two columns it spans. The Dreamweaver live view confirms this.
code:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-sm-offset-5">
<img src="Img/Logo.png" id="logo2">
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#DEE7E7;
}
#logo2 {
position:absolute;
width:30%
}
The #logo2 id is mostly just my attempt at centering it, and removing it does not fix the problem. I have looked at the bootstrap documentation and can't figure it out.
You can either apply a text-align: center; to the image's container using Bootstrap's text-center class. E.g:
<div class="col-sm-2 col-sm-offset-5 text-center">
<img src="Img/Logo.png" id="logo2">
</div>
Read more here: http://getbootstrap.com/css/#type-alignment
Or you can style logo2 to display as a block with auto margins. E.g:
#logo2{
display: block;
margin: 0 auto;
max-width: 100%;
}
#logo2 {
display: table;
margin: 0 auto;
}