I am trying to figure out how to display my divs on a single row and change their width.
If the image div doesn't exist, the description div should have width: 100% (or in my case col-12).
How can I change the width?
<div class="d-flex flex-column">
<div *ngFor="let update of updates">
<p class="font-weight-bold">{{update.title}}</p>
<div class="col-9">
<p>{{update.description}}</p>
</div>
<div *ngIf="update.imageUrl" class="col-3">
<img src="{{update.imageUrl}}">
</div>
</div>
</div>
Use ngClass directive and set classes conditionally.
<div class="d-flex flex-column">
<div *ngFor="let update of updates">
<p class="font-weight-bold">{{update.title}}</p>
<div [ngClass]="(update.imageUrl)?'col-9':'col-12'">
<p>{{update.description}}</p>
</div>
<div *ngIf="update.imageUrl" class="col-3">
<img src="{{update.imageUrl}}">
</div>
</div>
</div>
Here is the reference.
Related
i have two div columns in a row. i want the height of the left column to match that of the right column. In the first image is my desired state. But if the height of the right column changes, the height of the scrollable div should also be changed.
the reason is the height in px defined in the css, but i want to make that dynamical. how can i do that? Picture two shows my problem.
I would be glad about help :D
<div id="{{ project.RowKey }}" class="collapse" aria-labelledby="heading{{ project.RowKey }}">
<div class="card-body">
<div class="row">
<div class="col w-50 m-2">
<h6 class="row w-100">
Kommentare :
<div class="ml-2"><span
class="badge badge-pill badge-primary">{{ project.numberComments }}</span>
</div>
</h6>
<div class="row w-100">
<div class="w-100">
<!-- comments -->
<div class="" style="width:100%;height:200px;float:left;overflow-y:scroll;">
</div>
<!-- new comment -->
<form id="view_selection_form" action="{{ url_for('save_comment') }}"method="POST">
</form>
</div>
</div>
</div>
<!-- status -->
<div class="col w-50 m-2">
<h6>Details zum Status: </h6>
<div class="">
</div>
<div class="d-flex justify-content-end">Zuletzt geändert
von: {{ project.answers.last_changed_by.name }} |
{{ project.answers.last_changed_by.date }}
</div>
</div>
</div>
</div>
</div>
You can use display:flex; on the parent div and that makes the column divs to stretch till the parent div. Now restrict the height in parent div.
Check this example : https://codepen.io/AravinthAro/pen/ZEexPWv
I'm trying to create a layout that looks like the component on the image.
It's a 12 col bootstrap grid. I'm looking to make the text take up 6 cols, 1 col spacer in-between the text and the last col, and then I'd like the last col (image) to take up the rest of the horizontal space, in and out of the container.
I've trying mixing the container and container-fluid classes (not advisable according to Bootstrap docs) and it doesn't work.
How would one achieve this type of a layout using Bootstrap 4?
Image:
Existing code:
<div class="info-side">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<h2>#Model.TitleText</h2>
<p>#Model.AreaText</p>
</div>
<div class="col-1">
</div>
<div class="col-5">
<img src="#Model.Image.Url)" alt="#Model.Image.AlternativeText" style="width: 100%; height:100%;">
</div>
</div>
</div>
</div>
try this
<div class="info-side" >
<div class="container">
<div class="row col">
<div class="col-6 bg-info">
<h2>#Model.TitleText</h2>
<p>#Model.AreaText</p>
</div>
<div class="col-1 bg-warning">
</div>
<div class="col-5 bg-info">
<img src="#Model.Image.Url)" alt="#Model.Image.AlternativeText" style="width: 100%; height:100%;">
</div>
</div>
</div>
</div>
I added col to class row #div tag. It expands to all space available.
In another hand, mix containers regular and fluid is possible, but you have to take care of hierarchy: fluid is widest as regular, so regular must be included alone or inside a fluid class.
See this answer: link
Good Luck!
I've come to the following solution which creates the layout in my original image in the question.
I had to make one row position absolute, this way the two containers are overlapping each other.
<div class="info-side">
<div class="text-side container" style="position: relative;" >
<div class="text-area" style="position: absolute;">
<div class="row">
<div class="col-6 d-flex align-items-center" style="height: 600px;">
<div class="text-items">
<h2>#Model.TitleText</h2>
<p>#Html.Raw(Model.AreaText)</p>
</div>
</div>
</div>
</div>
</div>
<div class="image-side container-fluid">
<div class="row">
<div class="col-7"
<div class="col-5" style="height: 600px; ">
<img src="#Model.Image.Url" alt="#Model.Image.AlternativeText">
</div>
</div>
</div>
</div>
I am trying to add a background image for my website, using bootstrap-4 and external css (internal doesn't work for me as well).
I am trying to add image which will be behind all rows which are in a
If i try to use it for a rows inside the container it works, but i wanna the background behind all rows, not just behind one.
Could you help me with that please?
.background {
background-image: url('images/podklad.png') !important;
height: 100%;
}
#top_part {
/*background-color: #ff9900 !important;*/
}
<div class="container-fluid background" >
<div class="row" id='top_part'>
<div class="col-6" >
<div class="d-flex text-center justify-content-center align-items-baseline">
<h1>bla bla<br/>bla bla</h1>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-primary"><h4></h4></button>
</div>
</div>
<div class="col-6">
<img class="img-fluid" src="images/krabicka.png" alt="">
</div>
</div>
<div class="row" id='top_part'>
<div class="col-12 text-center">
<h2>bla bla</h2>
</div>
</div>
<div class="row" id='top_part'>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/lock80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/gears80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/heart80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
</div>
</div>
It seems that your code worked for me.
Here's a JSFiddle I created with example pictures. You can just replace my example images with yours. Your code correctly places the image behind the container with all of the rows.
If you want the image to be behind literally everything on the page, then change your CSS to look like this:
body {
background-image: url('images/podklad.png') !important;
background-size: cover; /* Resizes the image to cover the entire container */
}
If no image is showing up, then make sure the image paths are correct.
I have the following html code to place an image next to div as in facebook comments:
<div className="row">
<div className="col-sm-1">
<img
className="img-thumbnail"
src="image.jpg" />
</div>
<div className="col-sm-11">
<div className="bg-light rounded p-1 pl-2">
<span className="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
However, this use of grid creates a space in the first div (col-sm-1) since the image size is smaller than the allotted width on the div. You can see the problem visually below. Any suggestions to mitigate this?
UPDATE
When using col-sm-auto, there is always a space left from the right because of col-sm-11, as you can see in the image:
You can use col-sm-auto instead of col-sm-1 which will shrink the column to the width of the content (the image). Also remove the left or right padding on the columns.
https://www.codeply.com/go/SLirjy4KDw
<div class="container">
<div class="row">
<div class="col-sm-auto pr-0">
<img class="img-thumbnail" src="//placehold.it/40">
</div>
<div class="col-sm-11 pl-0">
<div class="bg-light rounded p-1 pl-2">
<span class="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
</div>
You can use two div with d-inline as class. As these spaces will disappear
https://getbootstrap.com/docs/4.3/utilities/display/
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