Highlighted

A coloured box?

Community Beginner ,
Aug 22, 2018

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,

Screen Shot 2018-08-23 at 11.40.35 AM.png

But when browsed, they appear as a tiny line

Screen Shot 2018-08-23 at 11.42.05 AM.png

How can I make it to look like a "bigger" box?

Screen Shot 2018-08-23 at 11.44.02 AM.png

I saw a video on this but I can't find it now Thank you for helping

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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

  • include content
  • set a height
  • increase the padding

Views

212

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

A coloured box?

Community Beginner ,
Aug 22, 2018

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,

Screen Shot 2018-08-23 at 11.40.35 AM.png

But when browsed, they appear as a tiny line

Screen Shot 2018-08-23 at 11.42.05 AM.png

How can I make it to look like a "bigger" box?

Screen Shot 2018-08-23 at 11.44.02 AM.png

I saw a video on this but I can't find it now Thank you for helping

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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

  • include content
  • set a height
  • increase the padding

Views

213

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 22, 2018 0
Adobe Community Professional ,
Aug 22, 2018

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

  • include content
  • set a height
  • increase the padding

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 22, 2018 1
Community Beginner ,
Aug 26, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 26, 2018 0
Adobe Community Professional ,
Aug 27, 2018

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?

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2018 0
Adobe Community Professional ,
Aug 23, 2018

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>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 23, 2018 1