I am trying to create a top header with HTML using div row. There should be one word on the left, and the other 3 words on the left; all within the row. However, result turns out to be all four words are on different rows stacked together. I can't find nothing wrong from my codes.
<div class="container-fluid">
<div class="row" style="background-color:orange; margin:-8px; margin-top:-20px">
<div class="col-md-1">
</div>
<div class="col-md-1">
<h3>stark</h3>
</div>
<div class="col-md-6">
</div>
<div class="col-md-1">
<h3>about</h3>
</div>
<div class="col-md-1">
<h3>portfolio</h3>
</div>
<div class="col-md-1">
<h3>contact</h3>
</div>
<div class="col-md-1">
</div>
The Bootstrap .row class is defining a left and right margin of -15px.
But you overwrite this with your margin: -8px; and that's why the columns don't fit anymore into the row.
Remove margin:-8px; margin-top:-20px and it will work.
I am assuming from the classes you are using, you are using Bootstrap. Ensure the bootstrap css and javascript files are referenced. Your html seems to work properly in this fiddle:
https://jsfiddle.net/e29aju5c/
<div class="container-fluid">
<div class="row" style="background-color:orange; margin:-8px; margin-top:-20px">
<div class="col-md-1">
</div>
<div class="col-md-1">
<h3>stark</h3>
</div>
<div class="col-md-6">
</div>
<div class="col-md-1">
<h3>about</h3>
</div>
<div class="col-md-1">
<h3>portfolio</h3>
</div>
<div class="col-md-1">
<h3>contact</h3>
</div>
<div class="col-md-1">
</div>
You should have the following code (or the equivalent code pointing to your bootstrap files) somewhere on the page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Related
I would like to be able to divide a bootstrap gid even more. Without to much hassle or workarounds. What is the best way of creating column 1/24 of a grid.
Fiddle to understand better what I mean: https://jsfiddle.net/Lmm1ra7d/
<div class='row'>
<div class="col-xs-8">8/12</div>
<div class="col-xs-4">4/12</div>
</div>
<br/>
Now I need to transform this to a 0.5/12 => 1/24 What would be the best approach without a hacky fix. Also not to break the responsiveness.
This is the smallest column bootstrap can make 8.3333%
<br/>
<br/>
<div class='row'>
<div class="col-xs-1">1/12</div>
<div class="col-xs-11">11/12</div>
</div>
<br/>
What I really want would be 4%
<br/>
<br/>
<div class='row'>
<div style="width:3%; display: inline-block;">1/24</div><div style="width:96%;display: inline-block;">23/24</div>
</div>
You can just nest another column setup in the col-*-1. If the padding on the nested row/columns is unwanted you can just add a class to override the padding.
<div class="row">
<div class="col-xs-1">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
</div>
you can nest a row in a column, so basically you divide your main row in other rows. For example
<div class="row">
<div class="col-sm-3">
<!-- now you have 1/4 -->
<div class="row">
<div class="col-sm-3">
<!-- now you have 1/4 of 1/4 -->
</div>
</div>
</div>
</div>
I am trying to adapt a layout on Bootstrap that I got from the designer. Two columns in the content has a small spacing, that I couldn't achieve with direct column-spacing (as it gives too much gap). Thus, I tried wrapping everything into a row and adding sub-columns inside my main columns. Here in the code, it's more clear:
<div class="container">
<div class="col-md-12 banner"></div>
<div class="row">
<div class="col-md-8">
<div class="col-md-12 leftSide">
</div>
<div class="col-md-12 leftSide">
</div>
</div>
<div class="col-md-4 rightSide">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Now the spacing seems good but as I wrapped it in a row (I think), the right panel overflowed more then the banner.
It can be seen more clear on the fiddle: http://www.bootply.com/gMBrLvaK5C
The problem is the 'rightSide' panel.
How can I keep that spacing between 'leftSide' and 'rightSide', and fix the overflowing of the right column (because the spacing gets too much if I try achieving spacing with columns)? Or what is the best way to achieve that?
this is my personal solution, instead of add a class on the columns, create a div inside of a column, then you can place a div.banner and div.block like my example:
http://www.bootply.com/PEIiDnp9VD
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="block"></div>
</div>
<div class="col-md-4">
<div class="block"></div>
</div>
</div>
</div>
if you want less space between the columns you can simply override Bootstrap col-md-* class by adding a class on the columns changing the padding left and right.
First of all, you need to follow proper wrapping of rows and columns. If you want consistency you need to make sure all columns are wrapped into a row.
<div class="row">
<div class="col-md-8 leftSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-4 rightSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Then apply custom margins and styling to elements inside of the columns, not columns themselves.
http://www.bootply.com/g6eLHRd1tH
I'm using bootstrap (version 3.3.6) for the first time to make my site. Readed the docs and start to code. Excluding the <link>'s the code below is my site's structure:
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
</div>
Using push and pull classes I thought I was removed padding for the columns. Setting the main div with 'class="container"' I have the result:
Changing to 'class="container-fluid"' the behavior remains strange. Notice shapes overlapping page:
What I want in my results is: the circle and rectangle (both are divs) remains aligned to the edges of the page (left and right) with no padding or marging. Following docs until now doesn't work. What this behavior occurs?
by default col-* have padding so you just need to reset them
[class^="col"] {
padding: 0
}
[class$="-2"] {
background: orange
}
[class$="-10"] {
background: grey
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
I am just beginning to learn to code. I am using Skeleton boilerplate to build a responsive template. I am struggling to understand, how to make two items appear on the same row. below is my code for this.
<div class="header">
<div class="container"
<div class="row">
<div class="three.columns"><img src="/image/file">
</div>
<div class="nine.columns">Headline</div>
</div>
</div>
`
">" is missing from the container div.
This would be the correct code:
<div class="header">
<div class="container">
<div class="row">
<div class="three columns"><img src="/image/file"></div>
<div class="nine columns">Headline</div>
</div>
</div>
</div>
I am currently using bootstrap on a website which is displaying an ecommerce store.
The current layout is 3 columns of items within 4 rows, but I am wanting to implement a button which will change it to 2 columns.
I have done so, however the code seems to be causing some issues in that the layout changes to
Two Items
One Item
Two Items
One Item
Each one Item row has a large area of white space where an item could go.
The Code below shows one "Row" which is in the three column layout. I have used javascript which changes the class 'col-sm-4' to 'col-sm-6'. Where is my mistake here?
<div class="row"><!-- row 2 -->
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/raina_parka.png" class="product-image">
</div>
<div class="row product-status">
<span class="products-status-sale">Sale</span>
</div>
<div class="row">
<p class="product-name col-sm-12"<p>Raina Waterproof Parka</p>
</div>
<div class="row product-price">
<span>£99.00</span>
</div>
</div>
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/april_jacket.png" class="product-image">
</div>
<div class="row product-status">
<span></span>
</div>
<div class="row">
<p class="product-name col-sm-12">April Waterproof Front Pocket Jacket</p>
</div>
<div class="row product-price">
<span>£99.95</span>
</div>
</div>
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/free_delivery.png" class="product-image">
</div>
<div class="row product-status">
<span></span>
</div>
<div class="row">
<p></p>
</div>
<div class="row product-price">
<span></span>
</div>
</div>
</div><!-- end row 2 -->
The columns should only add upto 12. When you change 4 to 6 its becomes 18.
<div class="row">
<div class="col-lg-4"></div><div class="col-lg-4"></div><div class="col-lg-4"></div>
</div>
Problem solved. I just had to remove all of the rows and tweak the JS to add the class