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>
Related
In the following picture as you can see "Colton Smith" is coming in two lines. What should I do to prevent this? I want to display in the same line.
Here is my code
<div class="row mt-5" id='imag'>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-1">
<img src="images/image-colton.jpg" alt="" />
</div>
<div class="col-lg-3" id="intro">
<h6>Colton Smith</h6>
<h6>Verified Buyer</h6>
</div>
</div>
<div class="row">
<p>
"We needed the same printed design as the one we had ordered aweek prior. Not only did they find the original order, but we alsoreceived it in time. Excellent!"
</p>
</div>
</div>
</div>
here is the image of above code
In your code change <div class="col-lg-3" id="intro"> to <div class="col-lg-11" id="intro">
I am working on my personal website and i'm trying to make a new row with Bootstrap 4. The row has an H1 above it. Whatever I'm trying, the row won't move to the next line. I tried different solutions, inline, br, different rows, nothing works. Can somebody help me out?
This is my current HTML code:
<h1>Projecten</h1><br>
<div class="row">
<div class="col-sm">col</div>
<div class="col-sm">col</div>
<div class="col-sm">col</div>
</div>
I didn't change anything on the CSS code, just the default bootstrap code.
Click here for a screenshot
With bootstrap is
<div class="row">
<div class="col">
<h1>Text</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>col</p>
</div>
<div class="col-md-4">
<p>col</p>
</div>
<div class="col-md-4">
<p>col</p>
</div>
</div>
My issue is that the text starts to appear in two lines when browser width gets a little smaller.
I am using the bootstrap grid system... so shouldn't the text be adjusted within the grid?
I tried changing:
<div class="row">
To
<div class="row col-sm-12">
but same result.
My code snippet:
<div class="row">
<div class="col-sm-8">
<p>Posted by admin on this this date</p>
</div>
<div class="col-sm-4">
<p class="text-right">One comment</p>
</div>
</div>
Screenshot of issue:
JSFiddle Demo
Change sm to xs.
So now your code look like this:
<div class="row">
<div class="col-xs-8">
<p>Posted by admin on this this date</p>
</div>
<div class="col-xs-4">
<p class="text-right">One comment</p>
</div>
</div>
You have to read the Bootstrap CSS documentation first. It is clearly stated that .col-sm- column prefix will work starting from the width of Small Devices Tablets (≥768px).
Like Rizki said. You need to change col-sm-4 and col-sm-8 to this
<div class="row">
<div class="col-xs-8">
<p>
Posted by admin on this this date</p>
</div>
<div class="col-xs-4">
<p class="align-right">One comment</p>
</div>
</div>
Check it out in action -- https://jsfiddle.net/aLuv47bt/
Cheers.
Change col-sm tp col-xs to make it in one line. Here is the code.
<div class="row">
<div class="col-xs-8">
<p>Posted by admin on this this date</p>
</div>
<div class="col-xs-4">
<p class="text-right">One comment</p>
</div>
</div>
simple fix this with white-space:nowrap
p {
white-space:nowrap;
}
p {
white-space:nowrap;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-8">
<p>
Posted by admin on this this date</p>
</div>
<div class="col-sm-4">
<p class="text-right">One comment</p>
</div>
</div>
Check with demo
https://jsfiddle.net/x9g2th82/4/
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
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