I'm using the following code to list all my products on a website. The problem is that on some lines the title is displayed over two lines, then the next 3 columns doesn't display properly. Please con someone quide me in correcting this.
So it will display
<div class="container">
<div class="row space">
<c7-products>
<div class="col-md-4 col-sm-4 text-center wine-post">
<p><c7-product-image size="small"></p>
<p><c7-product-title></p>
<p><c7-product-wine-vintage></p>
<c7-if !product-wine-vintage>
<p>NV</p>
</c7-if>
<p><c7-product-add-to-cart></p>
</div>
</c7-products>
</div>
</div>
Related
Hi i need to wrap an array like this [TASK 1, TASK 2, TASK 3].
In HTML i want to display it like that TASK 1, TASK 2... and then with a tooltip the user can see the rest of the tasks.
I need that because i have little space in the col.
The piece of HTML is structured like that
EDIT:
<div class="col-2 border-right-yellow fw-bold">
<div class="row body-cells flex-center">
<div class="col-8">
<div class="row">
<div class="col">{{resource.resourcePlanDTO.cognome}}</div>
<div class="col">{{resource.resourcePlanDTO.nome}}</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col">
{{getTasks(resource)}}
</div>
</div>
</div>
</div>
</div>
getTasks is the method i use to take the string array from the back-end
I tried to use some flexbox classes but it didn't work :(
Now the array is displayed like you can see in the image in the column No.Task
Anyone can help? :)
My Problem
I am new to Bootstrap. My boss wants me to replicate the following screen ( or as close as possible ):
Desired Layout
I have tried to do this myself using:
<div class = "row">
and
<div class = "col-lg-x">
... but I can't get the rows and columns right! So frustrating. I have tried and tried and tried.
Does anyone have any ideas how I would replicate the following layout easily?
Thank you so much for looking at my problem.
Regards,
John
Not sure if it's the way that you have put your code on to SO however it should look something like this
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-12 col-sm-12">
12
<div class="row">
<div class-"col-sm-4">
4
</div>
<div class="col-sm-8">
8
</div>
</div>
</div>
Edit: You may also wish to take a look at nesting to help you achieve this https://getbootstrap.com/docs/4.0/layout/grid/
It is like placing different dishes over a dining table. I have an image(table) and i need to drag and place other small things(div) over the image. I need to get the coordinates in percentage w.r.t the image(table) size. I don't even know which is the event to be used. Please help.
<div class="col-lg-12 col-md-12 col-sm-12 mrg-btm-zero">
<!-- TODO: Change number of dishes w.r.t table name selection-->
<div ngDraggable [handle]="dishA" class="mrg-right-10 float-left">
<div #DishA class="dishes"></div>
</div>
<div ngDraggable [handle]="dishB" class="mrg-right-10 float-left">
<div #DishB class="dishes"></div>
</div>
<div ngDraggable [handle]="dishC" class="mrg-right-10 float-left">
<div #DishC class="dishes"></div>
</div>
<div class="Dinetable">
<!-- TODO: Change table image w.r.t table name selection-->
<img src="../../../../../assets/images/tableType1.png" />
</div>
</div>
i have this link. But don't know to use it in typescript. Also i need the percentage of coordinates from a responsive page.
This question already has answers here:
Where to place bootstrap row class
(4 answers)
Closed 4 years ago.
Let's say I have to nest three bootstrap col classes and the last one will be col-md-12 so it goes 100%. My question is, Is that ok to nest col-md-12 in one row like first example or do I need to create another row for col-md-12 ?
Eg 1
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-12">
3
</div>
</div>
or
Eg 2
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
</div>
<div class="row">
<div class="col-md-12">
3
</div>
</div>
It is absolutely fine to have more columns in a row than will fit in it. They will wrap.
What's more, this is essential to Bootstrap's approach to responsive design.
You might have something like:
<div class="row">
<div class="col-sm-6 col-lg-3">…</div>
<div class="col-sm-6 col-lg-3">…</div>
<div class="col-sm-6 col-lg-3">…</div>
<div class="col-sm-6 col-lg-3">…</div>
</div>
For a 4x1 layout on a large window and a 2x2 layout on a small window.
If you had to add a new .row container for each row, this would be impossible.
if you need the contents to be in the same Row then you can follow your example 1,
else you may proceed to following example 2 of your post.
Both are correct,depends on your requirement which one you want to use.
First example will put your columns inside same row but second example will create a seperate row for your col-md-12
Hope that helps
I'm new to Bootstrap and I came across this issue.
<div class="container row">
<div id="page" class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="header"></div>
<div id="article"></div>
<div id="footer"></div>
</div>
<div class="col-lg-2 col-md-1"></div>
In boostrap documentation it shows that I dont have to use the last div.
doc: <div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
6 + 3 = 9. There are 3 col missing. I just want to make sure I understood this well before progressing into more details.
IF there are col missing inside a row will row automatically add them?
Or will I have some sort of a surprise bug at the long run.
I was using the 1200px grid system before. and I always had to add the the cols in correct order and correct numbers.
6+3= 9 & The remaining columns/grids i.e 3 columns space will remain empty, it won't give any bug, it just center align the DIV having class col-md-offset-3 by moving it 3 columns from left and 3 columns on right are empty so the DIV will be center aligned.
Hope this will bring some clarity, thanks.
First: Don't put class container and row in the same div.
Answer: If you start a new row it will start counting from zero again.
You could put all your sections in separate containers.
<div class='container'><!--this is your container-->
<div class='row'><!--this is your row-->
<div class='col-md-4 col-md-offset-3'><!--populating row with col with offset-->
</div>
</div>
<div class='row'>
<!--some other cols will start counting from zero because it is a new row-->
</div>
</div>