• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

A coloured box?

Community Beginner ,
Aug 22, 2018 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

Views

331

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
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 22, 2018 Aug 22, 2018

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

Votes

Translate

Translate
Community Expert ,
Aug 22, 2018 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
Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Beginner ,
Aug 26, 2018 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.

Votes

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
community guidelines
Community Expert ,
Aug 27, 2018 Aug 27, 2018

Copy link to clipboard

Copied

LATEST

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
Aug 23, 2018 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines