Copy link to clipboard
Copied
I have a partial of code here:
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
</div>
<div class="col-sm-6" style="background-color:greenyellow;">
</div>
</div>
On the design view, it shows the two colorer-region,
But when browsed, they appear as a tiny line
How can I make it to look like a "bigger" box?
I saw a video on this but I can't find it now Thank you for helping
The height of a div is determined by the content. The reason why you are seeing anything at all is because of the padding that Bootstrap applies to the col class.
There are a number of ways to do what you want, namely
Copy link to clipboard
Copied
The height of a div is determined by the content. The reason why you are seeing anything at all is because of the padding that Bootstrap applies to the col class.
There are a number of ways to do what you want, namely
Copy link to clipboard
Copied
Thanks. and I also manage to find the video that explain what I intend to do:
<style>
.colimg200 {
height: 200px;
background: #aaa;
}
.colimg100 {
height: 88px;
background: #bbb;
}
</style>
<div class="container mt-2">
<!-- (a) 2 equal width columns -->
<div class="row">
<!-- colum 1 -->
<div class="col-sm-8 bg-dark colimg200"></div>
<!-- column 2 -->
<div class="col-sm-4">
<!-- row 1 -->
<div class="row colimg100 ml-2 mb-4">
<div class="col-sm-12"></div>
</div>
<!-- row 2 -->
<div class="row colimg100 ml-2">
<div class="col-sm-12"></div>
</div>
</div>
</div>
</div>
Because I do not want to include contents. And the above will produce the desired boxes and lightly coloured.
Thanks for the encouragement.
Copy link to clipboard
Copied
Maybe I'm missing something but f you have no content, why bother making a complex sturcture when an image will do the same thing with less code?
Copy link to clipboard
Copied
As Ben said, add some content to your div tags. .It looks like you're using Bootstrap. instead of adding inline CSS, you can use Bootstrap contextual classes to change background & text colors.
Example:
<div class="container">
<div class="row">
<div class="col-sm-6 bg-warning">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi voluptatum numquam earum temporibus dolore quam magnam, quia et voluptatem accusamus, rem eaque doloremque impedit, praesentium sapiente? Dolor laboriosam ea itaque!</p></div>
<div class="col-sm-6 bg-success text-white">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora amet optio facere expedita nihil asperiores est nesciunt reprehenderit delectus, repudiandae, fuga quaerat doloribus molestiae recusandae numquam autem, quidem sed laudantium?</p> </div>
</div>
</div>