Skip to main content
benn25106859
benn25106859
Known Participant
January 20, 2017
Answered

Bootstrap Issue

  • January 20, 2017
  • 2 replies
  • 642 views

I'm quite new to web development and I'm following an old tutorial from 2014, the guy is using and old version of bootstrap. I want to make the background color of the text different and I followed the tutorial but it didn't work. The code goes:

<div class="mypanel">

  <div class="heading">my header</div>

  <div class="body">

    <p>my body</p>

  </div>

</div>

and in the css:

.mypanel {

  margin: 3%;

}

.mypanel .heading{

  background-color: #3FE8BB;

}

There is more of course however I didn't think this was relevant.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    I realize that the contextual classes can be used however for the purpose of learning html, and using not just bootstrap, I want to know whats wrong with the code I've got. Most of the time I probably will use the contextual classes but I want to know this just in case


    What exactly are you trying to change? 

    A panel background?

    .panel-body {background-color: teal}

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 20, 2017

    Learn to use Bootstrap's Contextual Classes.  They can be combined with other elements to give your layouts an instant pop of color.

    The contextual classes in Bootstrap are:

    • Primary (dark blue)
    • Info (blue)
    • Success (green)
    • Warning (gold/orange)
    • Danger (pink/red)
    • Default (black & white)

    Colors vary by theme and of course you can customize the class colors to suit with CSS code.

    In this example, I have combined contextual classes with panels and buttons.

    I'm using the latest stable release of Bootstrap 3.7 & a Bootswatch Color Theme called Flatly here:

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap Panels, Flatly Theme</title>

    <!--for mobile devices-->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--BOOTSTRAP FLATLY COLOR THEME-->

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">

    <style>

    body { padding-top: 71px }

    .center-block { float: none }

    </style>

    </head>

    <body>

    <!--begin top nav bar-->

    <nav class="navbar navbar-inverse navbar-fixed-top">

    <div class="container-fluid">

    <div class="navbar-header"> <a class="navbar-brand" href="#">Brand or Logo </a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li class="active"><a href="#">MENU 1</a></li>

    <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 1-1</a></li>

    <li><a href="#">submenu 1-2</a></li>

    <li><a href="#">submenu 1-3</a></li>

    </ul>

    </li>

    <li><a href="#">MENU 3</a></li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a> </li>

    <li><a href="#">MENU 6</a></li>

    </ul>

    </div>

    </div>

    <!--end top nav--></nav>

    <div class="container">

    <div class="row">

    <div class="col-sm-10 center-block text-center">

    <h1>Our Awesome Website</h1>

    <h2>Some Pithy Slogan</h2>

    </div>

    </div>

    <div class="row">

    <!--begin panel columns 2 & 4 across-->

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-primary">

    <div class="panel-heading">

    <h3 class="text-center">panel-primary</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-default center-block">btn-default</button>

    </div>

    </div>

    </div>

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-warning">

    <div class="panel-heading">

    <h3 class="text-center">panel-heading-warning</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-info center-block">btn-info</button>

    </div>

    </div>

    </div>

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-primary">

    <div class="panel-heading">

    <h3 class="text-center">panel-heading-primary</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-danger center-block">btn-danger</button>

    </div>

    </div>

    </div>

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-warning">

    <div class="panel-heading">

    <h3 class="text-center">panel-heading-warning</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-success center-block">btn-success</button>

    </div>

    </div>

    </div>

    </div>

    <!--LOWER CONTENT-->

    <div class="row">

    <div class="col-sm-7">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

    </div>

    <div class="col-sm-offset-1 col-sm-4 ">

    <h3>Social Media Feed</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim.</p>

    </div>

    <!--/row--></div>

    <hr>

    <div class="row">

    <footer class="col-sm-12">

    <p class="small">Template courtesy of <a href="http://alt-web.com">Alt-Web.com</a><br>

    Placeholder images from Dummyimage.com</p>

    </footer>

    <!--/row--></div>

    <!--/container--></div>

    <!--latest jQuery-->

    <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>

    <!--Bootstrap-->

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
      Rob Hecker2
      Rob Hecker2
      Legend
      January 20, 2017

      Copy all this code into a new document and run it. Your problem may be that the text you want to change is not within the mypanel class followed by the heading class. Try taking mypanel out of the equation. Anyway, we don't see enough of the code to really know what's going on.

      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
      <style>
          .mypanel .heading{

        background-color: #3FE8BB;

      }
          </style>
      </head>

      <body>
      <div class='mypanel'>
          <p class='heading'>Every good boy deserves favor.</p>
          </div>

      </body>
      </html>

      benn25106859
      benn25106859Author
      Known Participant
      January 20, 2017

      The whole code goes like this (I know it looks awful but I'm just messing about):

      <!doctype html>

      <html>

      <head>

      <meta charset="utf-8">

      <title>My Webpage</title>

      <link href="css/main.css" rel="stylesheet">

      <!-- Latest compiled and minified CSS -->

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Optional theme -->

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

      </head>

      <body>

      <header class="navbar" role="banner">

        <nav class="navbar navbar-default">

          <div class="container-fluid">

            <!-- Brand and toggle get grouped for better mobile display -->

            <div class="navbar-header">

              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> </button>

              <a class="navbar-brand" href="#">Brand</a> </div>

         

            <!-- Collect the nav links, forms, and other content for toggling -->

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

              <ul class="nav navbar-nav">

                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

                <li><a href="#">Link</a></li>

                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown </a>

                  <ul class="dropdown-menu">

                    <li><a href="#">Action</a></li>

                    <li><a href="#">Another action</a></li>

                    <li><a href="#">Something else here</a></li>

                    <li role="separator" class="divider"></li>

                    <li><a href="#">Separated link</a></li>

                    <li role="separator" class="divider"></li>

                    <li><a href="#">One more separated link</a></li>

                  </ul>

                </li>

              </ul>

            </div>

            <!-- /.navbar-collapse -->

          </div>

          <!-- /.container-fluid -->

        </nav>

      </header>

      <div class="container">

        <div class="row">

          <div class="col-sm-6 col-xs-12">

            <div class="panel panel-primary">

              <div class="panel-heading">Widget 1</div>

              <div class="panel-body text-danger"> Skr </div>

            </div>

          </div>

          <div class="darkerBG col-sm-3 col-xs-6 col-lg-offset-0">

            <div class="panel panel-default">

              <div class="panel-heading">Widget 2</div>

              <div class="panel-body"> <a href="#" class="btn-primary">Click Ting</a> </div>

            </div>

          </div>

          <div class="darkestBG col-sm-3 col-xs-6">

            <div class="panel panel-default">

              <div class="panel-heading">Widget 9</div>

              <div class="panel-body text-danger"> <a href="#" class="btn-primary">skr</a> </div>

            </div>

          </div>

        </div>

      </div>

      <div class="mypanel">

        <div class="heading">my header</div>

        <div class="body">

          <p>my body</p>

        </div>

      </div>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

      <!-- Latest compiled and minified JavaScript -->

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

      </body>

      </html>

      And the css is the same, anyway I'll try out what you said,

      Thanks

      EDIT:

      Also, I copied the style tag section in and it worked in changing the background colour, however is there a way of getting that onto the css no the html?

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      January 20, 2017

      If you want to change the panel background,

      <div class="panel-body-danger">Some thing here...<div>

      Nancy O'Shea— Product User & Community Expert
      Firefly Community Gallery
      Adobe Firefly

      Remix with Firefly Community Gallery

      Thousands of free creations to fall in love with and remix in Firefly.

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