I'm using the w3.css, I wanted to make a colored background with width 100%,
and inside it another box with width 80% which will contain the text, so I used the following:
<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center" style="width:80%">
test
</div>
</div>
The problem is that the second container with the 80% width is not centered in the page although I used w3-center.
I noticed that w3-center only centers the text, but the container itself isn't centered, so how can I center the container block?
I think this should work.. Try It..
<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center" style="width:80%;margin:auto;">
test
</div>
</div>
W3.CSS has no class for centring block elements. The only classes which do that have other effects as well.
You'll need to set the left and right margins to auto yourself.
`<html> <div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center justify-content-md-center" style="width:80%">
test
</div>
</div>`
This should do the trick.
w3-auto is a container for responsive size centered content.
w3-content is a container for fixed size centered content.
https://www.w3schools.com/w3css/w3css_references.asp
w3-auto is
{
margin-left: auto;
margin-right: auto;
}
I suggest
<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-auto" style="width:80%">
test
</div>
</div>
If you want to center the text, use also w3-center, of course.
I don't know much about w3.css there could be a native solution to this but If you prefer hacky way there it is:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-light-green" style="text-align: center">
<div class="w3-container w3-sand w3-center" style="width:80%; display: inline-block;">
test
</div>
</div>
</body>
</html>
https://jsfiddle.net/k2j676ba/
Related
I am currently using bootstrap 4. In my code, gap between two item (.items) is 30px due to bootstrap two columns padding. But container has padding 15px. I think if gap between two items is 15px which is equal to container padding would be better looking. How can I do that?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class = 'col-sm'>
<div class = 'bg-primary items'>A</div>
</div>
<div class = 'col-sm'>
<div class = 'bg-success items'>B</div>
</div>
<div class = 'col-sm'>
<div class = 'bg-info items'>C</div>
</div>
</div>
</div>
</body>
30px padding means it will be divided as 15px left and 15px right padding for div. So what is happening is, it is adding 15px padding from first(right side padding) and second div(left side padding) at center. So here is the solution:
div class="container-fluid">
<div class="row">
<div class = 'col-sm'>
<div class = 'bg-primary items'>A</div>
</div>
<div class = 'pl-0 col-sm'>
<div class = ' bg-success items'>B</div>
</div>
<div class = ' pl-0 col-sm'>
<div class = ' bg-info items'>C</div>
</div>
</div>
</div>
This is what I changed:
Added "pl-0" bootstrap class to second and third div. Hope it works!
You could simply remove padding from the middle column using px-0...
<div class="container-fluid border">
<div class="row">
<div class="col-sm">
<div class="bg-primary items">A</div>
</div>
<div class="col-sm px-0">
<div class="bg-success items">B</div>
</div>
<div class="col-sm">
<div class="bg-info items">C</div>
</div>
</div>
</div>
Or, use a special CSS class to override Bootstrap's gutter (=7.5px) ...
.p-row-sm {
margin-left: -7.5px;
margin-right: -7.5px;
}
.p-row-sm > div[class^="col"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
Demo: https://www.codeply.com/go/SZcY3X4hTY
You can use Bootstrap utility classes to tackle this. Here's an example from my project:
<div class="row">
<div class="col-lg-6 pr-lg-2">...</div>
<div class="col-lg-6 pl-lg-2">...</div>
</div>
The idea is very simple: I apply half-gutters when my screen is big enough to show both columns.
Please note that I use 1rem gutters and pr-lg-2/pl-lg-2 gives me .5rem padding. You might want to use different values according to your Bootstrap config e.g. pr-lg-1 or pr-lg-3.
There are several issues at play with the issue described above. When viewing a BS grid layout on mobile (col or xs) the container padding is removed. As a result, the combined left and right inner padding of a two-column layout make it look out of balance (too much padding between columns).
The solution, in theory, is straight forward. remove the left or right padding globally. However, this will result in other imbalances, and if you are working and a layout that has a variable number of items difficult to predict. The solution is to remove half of the right padding on the odd column elements and half the left padding on the even column elements using the :nth-child(even/odd) selector. see the solution here BS4 Reduce Padding Between 2-Up Grid Cards on Mobile
I'm new in bootstrap and I don't know if it's possible to have bootstrap containers wrapped in another element, Or if that wrapper can have some width, something like this,
<div style="background:url('xycv.jpg') center top no-repeat; width:100%">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">col1</div>
<div class="col-md-6">col2</div>
</div>
</div>
</div>
<div style="background:url('bla.png') center top no-repeat; width:100%">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">col1</div>
<div class="col-md-6">col2</div>
</div>
</div>
</div>
Or what happens if wrapper will have width:950px?
.container-fluid itself behaves like your wrapper, so your wrapper is kind of obsolete. Setting the background on the .container-fluid is what I would do.
If you need to wrap some bootstrap elements in your own element, you sure can do this.
yes you can have, only in case when you are using container-fluid class.
I've got Bootstrap3 page, and somewhere halfway is a row with full display height. How do I center the row's content vertically?
I already tried the "vertical-align:center" css property, but that doesn't seem to work (neither does 'middle' instead of 'center').
Here's a small live demo, or as a standalone HTML example:
<!DOCTYPE html><html><head><meta charset='utf-8'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>
<style type='text/css'>
.row { color:#ff0; }
.bg1 { background:#007; }
.bg2 { background:#060; }
.special { background:#600; height:100vh; vertical-align:center; }
</style>
</head><body>
<div class="container-fluid text-center">
<div class="row bg1">Top row<br><br></div>
<div class="row bg2">Another row<br>With some content<br><br></div>
<div class="row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
<div class="row special">
<h2>Hello</h2>
This should be vertically centered
</div>
<div class="row bg2">And here's yet another row<br><br></div>
<div class="row bg1">The bottom row<br><br></div>
</div>
</body></html>
.row has negative margins for the columns, using without inner col-X-X is going to give you odd results. Read the docs on how to use the grid system.
There are a variety of ways of vertical-align:middle (not center) http://css-tricks.com/centering-in-the-unknown/
DEMO: http://jsfiddle.net/mLopevv8/
READ ME: Make another class for .row, remove .container-fluid, convert the parent of the vertically aligned middle content to a display:table and the child is now a display:table-cell.
CSS
.special { background:#600; height:100vh; display:table;width:100%;}
.v-m {display:table-cell;vertical-align:middle}
HTML
<div class="text-center">
<div class="my-row bg1">Top row<br><br></div>
<div class="my-row bg2">Another row<br>With some content<br><br></div>
<div class="my-row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
<div class="my-row special">
<div class="v-m">
<h1>Hello</h1>
This should be vertically centered!
</div>
</div>
<div class="my-row bg2">And here's yet another row<br><br></div>
<div class="my-row bg1">-- The bottom row --<br><br>
</div>
</div>
One way is to give the line height to the text which you want to place at the center vertically and horizontally ,but the line height should be equal to the half of the height of the div in which it is being placed.
or
U can check out this link , this might help you:
http://jsfiddle.net/jasongennaro/unfwL/1/
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.