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
Related
I am making a project based on the grid. I am using bootstrap, CSS, and HTML for making the grid. I need to display a grid like this Image. But the row span is not working properly. I am using fully div structure, not the table. My code is:
`
<div>
<div class="row">
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
</div>
<div rowspan="2" class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
`
First I would suggest using indenting to make it more readable.
You would just create 3 columns next to each other and in the middle one start a new row.
In the code example I create 1 row and 2 columns that are full width, you could also just create 2 rows.
<div class='container'>
<div class='row'>
<div class='col-4 col1'>1</div>
<div class='col-4'>
<div class='row'>
<div class='col-12 col2'>2</div>
<div class='col-12 col3'>3</div>
</div>
</div>
<div class='col-4 col4'>4</div>
</div>
</div>
https://codepen.io/anon/pen/XOYZRG?editors=1100
Use class="short-div" at col-md-6 in both the div. Remove col-md-6 from both the div, also remove rowspan.
i have a task where i should have information inside "card", it should be displayed like on my example(picture)
so here is my html
<div id="app">
<el-card shadow="always">
Dashboard
</el-card>
<el-card class="box-card">
<div slot="header">
<h2>Card name</h2>
<p>Challenge</p>
</div>
<div class="text item">
</div>
</el-card>
</div>
can you help me to place those "approved posts", "influences", "likes", "comments" like on picture?
let's say i don't have such big experience bud i think that i should use grid or table display...
can you show me some example or to show how could it be in my example?
Thank you!
i am using Vue.js and Element UI libruary
Basicaly you need to follow col's, if you're familiar with bootstrap. so 2 equal col does the job
ex:
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<label>Posts</label>
<label>545454</label>
</div>
<div class="col-lg-6">
<label>Influencer</label>
<label>56656</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<label>Likes</label>
label>545454</label>
</div>
<div class="col-lg-6">
<label>Comments</label>
<label>56656</label>
</div>
</div>
</div>
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>
In the bootstrap grid system, there are 12 columns and col - *- * class is used to group together certain number of columns. But when I want to use the first 3 columns and then just the last column how do I do that, that is, how can I use certain columns and not others in a single row class?
Like when I make a page header, I give the title on the left hand side and certain other text on the right side of the header, I assume I can use the grid system here effectively, given that I can access certain columns.
Use the .offset-* class (.col-md-offset-* class for versions older than 4.0.0). For instance, occupy first 4 cols, and only the last 2 cols as follows:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 offset-md-6">.col-md-6 .offset-md-2</div>
</div>
Bootstrap v4.0.0-alpha.6
.b { background: #CCC; height: 80px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="b col-sm-4"></div>
<div class="b offset-sm-6 col-sm-2"></div>
</div>
</div>
Bootstrap v3.3.7
.b { background: #CCC; height: 80px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="b col-xs-4"></div>
<div class="b col-xs-offset-6 col-xs-2"></div>
</div>
</div>
First create 3 columns, then 8 columns, after that create the last column and you write the code in only first three and last one like this. think of it like a graph sheet.
<div class="col-md-3">
<!-- things you want in first three columns: code here-->
</div>
<div class="col-md-8">
<!-- leave this blank-->
</div>
<div class="col-md-1">
<!-- things you want in last column : code here-->
</div>
Use with col-md-offset-*.
like this
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
If you want three column next to each other and only use the last one you can simply just put in content in the last one like this:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4">Content here</div>
</div>
If I understand your question correctly, you want to be able to single out specific columns in your row of 12.
<div class='row'>
<div id='first' class='col-sm-4'>
<p>Column 1</p>
<div>
<div id='second' class='col-sm-4'>
<p>Column 2</p>
<div>
<div id='third'class='col-sm-4'>
<p>Column 3</p>
<div>
</div>
If you want to select specific columns, you could give them an id to uniquely identify them. If you would want to select the first and third column and change their background color to lightblue you could do this:
#first, #third{
background-color: lightblue;
}
You will have to use the .col-[xs|md|lg|xl]-offset-* classes in bootstrap, see here
For example, if you want the layout of your page to have only the first 3 columns and the last column containing elements just do:
<div class="row">
<div class="col-md-3">
<span>some text</span>
</div>
<div class="col-md-offset-8 col-md-1">
<span>some more text</span>
</div>
</div>
<div>
<div class="col-md-3" style="text-align:left">
<h1>Title</h1>
</div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3" style="text-align:right">
<p>Description</p>
</div>
I have an issue with bootstrap's grid layout. My columns are overlapping one another when I resize the screen to a smaller layout.
I'm not sure what the issue is.
Here is a picture of what is going on:
Here is my code
<div class='container-fluid'>
<div class="row"> <!-- 1 -->
<div class="col-sm-5 col-md-4">
<h1>JOHN SMITH</h1>
</div>
</div>
<div class='row'> <!-- 2 -->
<div class="col-sm-5 col-md-4">
<h2>VULCAN FLATBED</h2>
</div>
</div>
<div class="row"> <!-- 3 -->
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">
<div class='row'>
<img src="vulcan.jpg" alt="vehicle image" width='391'/>
</div>
<div class='row'>
<button type='submit'>
<img src="book_now_button#2x.png" alt="book now">
</button>
</div>
</div>
<div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;"> <!-- RIGHT SIDE -->
<div class='row'>
<h3>CAN HELP WITH</h3>
<p>LIFTING & YARD WORK</p>
</div>
<div class='row'>
<h3>AVAILABLE</h3>
<p>ALL WEEKENDS</p>
</div>
<div class='row'>
<h3>NOTE</h3>
<p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS,
WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN
ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU
SOME HELP WITH LIFTING OR YARDWORK I AM YOUR GUY. BOOK NOW TO CONTACT
ME AND LET ME HELP YOU OUT.
</p>
</div>
</div>
</div> <!-- end 3 -->
<hr>
</div> <!-- end wrap -->
According to Bootstrap Docs, for each .row you need to have a .col-*-* as direct child but you don't have it in a few of them. Which cause the overflow.
Plus don't use the html tag width, it is deprecated. use class="img-responsive" from bootstrap to achieve max-width:100%
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
<div class="row">
<!-- 1 -->
<div class="col-sm-5 col-md-4">
<h1>JOHN SMITH</h1>
</div>
</div>
<div class='row'>
<!-- 2 -->
<div class="col-sm-5 col-md-4">
<h2>VULCAN FLATBED</h2>
</div>
</div>
<div class="row">
<!-- 3 -->
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">
<div class='row'>
<div class="col-xs-12">
<img class="img-responsive" src="//lorempixel.com/500/200" alt="vehicle image" />
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<button type='submit'>
<img src="book_now_button#2x.png" alt="book now">
</button>
</div>
</div>
</div>
<div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;">
<!-- RIGHT SIDE -->
<div class='row'>
<div class="col-xs-12">
<h3>CAN HELP WITH</h3>
<p>LIFTING & YARD WORK</p>
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<h3>AVAILABLE</h3>
<p>ALL WEEKENDS</p>
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<h3>NOTE</h3>
<p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS, WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU SOME HELP WITH LIFTING OR YARDWORK I
AM YOUR GUY. BOOK NOW TO CONTACT ME AND LET ME HELP YOU OUT.
</p>
</div>
</div>
</div>
I believe your problem is that you have many elements with the "row" class that don't have any columns in them. The hierarchy goes container > row > col. Without a column, there is no need for anything to be declared a row, and it affects the layout in unusual ways without them.
Another problem is your image. Remove the "width" attribute, and add the following class attribute: class="img-responsive". See the Images section of the bootstrap docs for details.
In my case, I was using box-sizing: content-box; for all my elements in css. That is why padding was creating problems with overall computed width of the elements. So, I changed it to box-sizing: border-box; from box-sizing: content-box;
Ref:
https://getbootstrap.com/docs/4.0/getting-started/introduction/#box-sizing