It's my first time building a bootstrap website. I thought I knew how the columns worked, but when I try to use them they take up 100% width of the container (as opposed to taking up 1/4 of the container as they are supposed to). I've tried googling for people with the same problem but can't find anything. So, here's what I have...
HTML:
<body>
<div class = "hero container"></div>
<div class = "container-fluid how-it-works">
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-3"></div>
<div class = "col-md-3"></div>
<div class = "col-md-3"></div>
</div>
</div>
<div class = "featured container"></div>
<div class = "testimonials container"></div>
<div class = "about container"></div>
</body>
CSS:
.how-it-works {
height: 550px;
background-color: #f7f7f7;
}
.how-it-works .row .col-md-3 {
height: 550px;
background-color: blue;
width: 100%;
}
If anyone can figure out what I'm doing wrong, I would really appreciate some help. Thanks!
Remove following CSS (setting width on bootstrap columns):
.how-it-works .row .col-md-3 {
width: 100%;
}
For instance col-md-3 is defined as:
.col-md-3 {
width: 25%;
}
and your code changes that. Remove it and it will again take 1/4 of space.
width for .col-md-3 is already set by bootstrap so you are overwriting it with your css. you can check how it works here: http://getbootstrap.com/css/#grid
Related
I want to get my black navbar div to stretch completely across the screen. However, using width: 100% does change anything.
If anyone could give me advice on how to improve the way I created the navbar, it would be much appreciated.
https://codepen.io/vegetablecook/pen/qVgOPJ
HTML
<div class = "container">
<div class = "span12 text-center">
<h1>Bill Gates</h1>
</div>
</div>
<div class = "container" id = "nav-container">
<nav class = "navbar navbar-default">
<ul class = "navbar-nav flex-row ">
<li class = "nav-item"><a id = "special" href = "#"> Business Magnate</a></li>
<li class = "nav-item"> Investor</li>
<li class = "nav-item"> Philanthropist</li>
</ul>
</nav>
</div>
CSS:
body {
margin-top: 60px;
}
.navbar-nav > li{
padding-left: 30px;
padding-right: 30px;
}
.navbar-nav > li > a {
font-size: 40px;
color: white;
text-decoration: none;
}
#nav-container{
background-color:black;
width: 100%;
top: 0px;
width: 100%;
height: 100px;
}
#billgates-headshot{
width:40%;
}
#row2{
padding-top: 50px;
}
#billgates{
padding-left: 50px;
}
#billgates-midspeech{
width: 70%;
}
The "container" class in bootstrap isn't made to be 100%. You want to use the "container-fluid" class to span across the viewport. I've made some small changes which can be found at https://codepen.io/anon/pen/LeeMGy.
Documentation reference: https://getbootstrap.com/docs/3.3/css/#overview-container
Use .container for a responsive fixed width container.
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container-fluid">
...
</div>
It's your use of the container class - if you inspect the element using your developer tools you'll see that the child container is being padded by the parent container.
Remove the nested containers or move your nav outside of the scope of your parent container to fix this.
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 have a task to build a sidebar, whose height is equal to the content one.
The more content is, the bigger sidebar is.
In reality, my sidebar is equal to the window size, not content. If I scroll the page down, there is no sidebar on it.
That's me code:
HTML:
<div class = "container" style = "height :100%">
<div class = "row" style = "height:100%">
<div class = "col-md-3 hidden-xs hidden-sm" style = "height:100%">
<div class = "sidebar">
.........
</div>
</div>
</div>
</div>
CSS:
html .sidebar,
body .sidebar {
height: 100%;
width: 100%;
background: black;
}
Why? What to do to make it work?
If I get what you mean properly, then you want the sidebar to be fixed?
In order to do this you can do something a bit like this in the css..
.sidebar {
width: 250px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: black;
}
<div class="sidebar">
</div>
I'm trying to work out how to achieve the following in Bootstrap 3:
I have a HTML page which is primarily based around bootstrap's fixed container grid.
Half way down the page I want a row with columns of different sizes.
I want the content (text / images) inside these columns to line up with the content inside the columns in the fixed container grid.
I want the background colours of the left and right furthest columns to bleed right to the edge of the page.
It may help if I illustrate what I'm trying to achieve:
Any help would be greatly appreciated!
Update: as requested here's some code examples of what I currently have: http://www.bootply.com/ZzOefJGRRq As you can see the text and columns in the fluid container are not lining up correctly.
Bootstrap 4
Use position absolute before or after elements with width: 50vw
Codepen
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
...
</div>
</div>
<div class="row">
<div class="col-lg-6 c-col-bg--red">
...
</div>
<div class="col-lg-6 c-col-bg--blue">
...
</div>
</div>
</div>
CSS
.container-fluid {
max-width: 1000px;
}
#media (min-width: 992px) {
div[class*="c-col-bg"] {
position: relative;
}
div[class*="c-col-bg"]:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
width: 50vw;
}
.c-col-bg--red:after {
right: 0;
background: red;
}
.c-col-bg--blue:after {
left: 0;
background: blue;
}
}
You can use :before elements and some classes
https://jsfiddle.net/ex3ntia/wa8myL9v/2/
.bg:before {position:absolute;left:0em; content:'';height:100%;width:800em;z-index:-1}
UPDATE
added media query for small devices
https://jsfiddle.net/ex3ntia/wa8myL9v/3/
UPDATE 2
I have added the following line to fix the big horizontal scroll on chrome browsers.
body, html {overflow-x: hidden;margin: 0;padding: 0;}
TLDR; no framework has this out of the box, because covering all possible use cases is both very complex and would result in a huge amount of code.
It is doable but requires some amount of manual coding. The approach below works for 2 columns. More columns and breakpoints will require a more complex solution.
Sample markup:
<div class="container">
<div class="row">
<div class="col-5">default column</div>
<div class="col-7">default column</div>
</div>
</div>
<div class="container container--fluid">
<div class="row">
<div class="col-5">fluid column, aligned with above</div>
<div class="col-7">fluid column, aligned with above</div>
</div>
</div>
<div class="container container--bleed">
<div class="row">
<div class="col-5">
<div class="content">like fluid, but content is aligned with default</div>
</div>
<div class="col-7">
<div class="content">like fluid, but content is aligned with default</div>
</div>
</div>
</div>
scss for brevity
// assuming you have these values or able to set them
$max-width: 1140px;
$gutter: 8px;
$grid: 12;
$customColumns: [5, 7]; // columns you want to align
// sample grid
.container {
max-width: $max-width;
margin: 0 auto;
padding-left: $gutter;
padding-right: $gutter;
}
.row {
display: flex;
margin-left: -$gutter;
margin-right: -$gutter;
}
div[class^='col'] {
max-width: 100%;
padding-left: $gutter;
padding-right: $gutter;
position: relative;
}
#for $i from 1 through $grid {
.col-#{$i} {
width: calc(100% * #{$i} / #{$grid});
}
}
.container--bleed, .container--fluid {
max-width: none;
}
// custom grid rules for alignment
#media(min-width: #{$max-width}) {
#each $i in $customColumns {
.container--bleed, .container--fluid {
.col-#{$i}:first-child, .col-#{$i}:last-child {
width: calc(#{$max-width * $i / $grid} + ((100% - #{$max-width}) / 2));
}
}
.container--bleed {
.col-#{$i}:first-child {
padding-left: calc((100% - #{$max-width}) / 2 + #{$gutter});
}
.col-#{$i}:last-child {
padding-right: calc((100% - #{$max-width}) / 2 + #{$gutter});
}
}
}
}
I created a codepen POC for a similar layout here: https://codepen.io/bariscc/pen/BajKpMP
You can implement the container-fluid to achieve this.
Basically your webpage will have the following structure:
<div class="container">
<p>Content here</p>
</div>
<div class="container-fluid">
<p>"Bleeded" content here</p>
</div>
<div class="container">
<p>And it continues with the fixed width!</p>
</div>
If you need to adjust the spaces between those containers, you can add your own classes or ID:s to each and kind of take it from there. Since containers in Bootstrap don't have much of a default styling, this is very efficient way of creating what you're looking to do in here.
EDIT: After inspecting the comments section and looking at the code you provided, I assume you want to have the fluid container, but keep the contents within it lined up with the fixed container, right?
For this, you can just put another <div class="container">...</div> in your container-fluid. Check the updated fiddle.
Where you have the special row, you need a div with container-fluid class encapsulating a div with container class (this is a fixed width class).
Then you need to account for the background colours either side. Either add additional divs within container-fluid each side of container and set background colour, or perhaps use a three column table.
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}