Skip to main content
M
markf26988182
Known Participant
May 30, 2018
Answered

Column Height (or div height)...oy vey

  • May 30, 2018
  • 3 replies
  • 5633 views

[Was asked not to bunch multiple questions together in a post...so I've split this one off, from my previous post]:

So...the bootstrap grid system...what good is it if one cannot define the height of a column?  I've been reading as much as I can on this topic; & all I can seem to get is: .col-sm-4 this; and .col-md-8 that; and .col-lg-10 the other thing...very confusing to me...sorry.

On my website:

Burlington County Area of NA / Home page

...the block that reads 'DRUG PROBLEM...'...it's too HIGH...!!!  I need to have the size of the text remain the same (& stay centered), but have the height of that area (not knowing if it's the column height or div height I'm talking about)...be more narrow...not as tall.

If someone can point me to an UNDERSTANDABLE yet DETAILED informational on this topic...(including the relationship to the containers the columns reside in)...my work on this site will be concluded.

thanx; & sorry to keep bothering the folks here...you've all been exceedingly helpful...very much appreciated,

mf

    This topic has been closed for replies.
    Correct answer osgood_

    Ben provided you with the answer in your other thread.

    You need to understand the Bootstrap classes. p-5 on your <div> means padding top, right, bottom and left. p-5 - I think is the largest you can have in Bootstrap, try p-2 or even just remove it.

    <div class="col-sm-10 col-md-10 col-lg-8 rounded mx-auto text-center p-5">

    https://getbootstrap.com/docs/4.1/utilities/spacing/

    3 replies

    M
    markf26988182Author
    Known Participant
    May 30, 2018

    osgood...

    fixed it...uploaded it...(understand it now...it was the div; & it's padding)...thanx!

    1 last question...on that line of text...how do I change just a selected portion of it to a different color?  [couldn't find any html/bootstrap info on the web relative to changing text color of individual/select words on a given line; & also looked around in DW for a properties function for selected text]

    Everything from the word 'HELPLINE' to the end I need in red...I suppose it's something to do w/ CSS, but couldn't figure out how to implement that either.

    thanx,

    mf

    M
    markf26988182Author
    Known Participant
    May 30, 2018

    never mind...figured it out...<span style="color:#FF0000">HELPLINE: 1-800-992-0401</span>

    mf

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 30, 2018

    Excuse me for saying this, but won't your Helpline phone number be linked as I suggested yesterday for people on mobile phones who don't like typing numbers?

    Also, the Bootstrap 4 contextual class for red text is class="text-danger".  The other contextual colors are described below.

    Bootstrap 4 Colors

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 30, 2018

    Height is rarely if ever expressed explicitly because it varies by content, borders, padding, margins and viewport size.  Please review the CSS Box Model.

    CSS Box Model

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_Correct answer
    Legend
    May 30, 2018

    Ben provided you with the answer in your other thread.

    You need to understand the Bootstrap classes. p-5 on your <div> means padding top, right, bottom and left. p-5 - I think is the largest you can have in Bootstrap, try p-2 or even just remove it.

    <div class="col-sm-10 col-md-10 col-lg-8 rounded mx-auto text-center p-5">

    https://getbootstrap.com/docs/4.1/utilities/spacing/

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices