Skip to main content
S
sheryltoo
Known Participant
May 14, 2019
Question

Help styling a grid row

  • May 14, 2019
  • 2 replies
  • 5333 views

I'm trying to style my bootstrap layout with a custom css file. I followed a youtube video on how to add grid rows with columns.

Below is my basic layout that I'm trying to style. I thought I was making some progress until I tried to add an image as a background in my header. It shows up in the header and the footer. Is that because they both have a class that says "col-sm-12" Do I need to change the name on a class? And what about the fact that I have a lot of div that says class=row? The video looked the same as my html except for being a fluid container.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
<link href="css/bootstrap-4.3.1.css" rel="stylesheet">

  </head>
  <body>
   <!-- body code goes here -->
    <div class="container">
   <header class="row">
     <div class="col-sm-12">Content goes here</div>
      </header>
   <div class="row">
     <nav class="col-sm-3">Content goes here</nav>
    <main class="col-sm-9">Content goes here</main>
   </div>
   <footer class="row">
    <div class="col-sm-12">Content goes here</div>
   </footer>
    </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.3.1.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
  <script src="js/bootstrap-4.3.1.js"></script>
  </body>
</html>

This topic has been closed for replies.

2 replies

pziecina
pziecina
Legend
May 16, 2019

I don't know how all this helps the OP, but if I wished to use bootstrap, without learning modern coding, I would be using Wappler.

https://wappler.io/index

O
osgood_
Legend
May 16, 2019

pziecina  wrote

I don't know how all this helps the OP, but if I wished to use bootstrap, without learning modern coding, I would be using Wappler.

https://wappler.io/index

The only issue I have with that program users are likely to then start deploying the niche code it uses, beyond Bootstrap. That's ok if youre just producing a website for yourself (the OP is in this case) or you work on an 'inhouse' website but I cant say I would be advising anyone with a longer term interest in web-development to go down that route. Im not sure there are going to be many jobs calling for Wappler centric developers.

pziecina
pziecina
Legend
May 16, 2019

I don't think Dw is aiming above the casual or own web site user.

So much is missing, old or wrong with Dw now, that anyone looking at anything beyond the two above mentioned groups, has much better free options.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
May 14, 2019

Try this:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

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

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

<title>Untitled Document</title>

<link href="css/bootstrap-4.3.1.css" rel="stylesheet">

<!--custom styles-->

<style>

header {

background: #000 url(https://placeimg.com/1200/200/nature) no-repeat center center;

background-size: cover;

min-height: 200px;

color: white;

}

nav { background-color: antiquewhite; }

main { background-color: beige; }

footer { background-color: tan; }

</style>

</head>

<body class="container">

<header class="row">

<div class="col">

<h1>My Awesome Website Header</h1>

<h2>Some Pithy Slogan....</h2></div>

</header>

<div class="row">

<nav class="col-sm-3">

Navigation goes here...

</nav>

<main class="col-sm-9">

<article>

<h3>Heading 3</h3>

<p>Main article content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem modi, reiciendis nulla excepturi nihil! Libero vitae rem illo deleniti quas amet quibusdam, voluptatem ipsum distinctio asperiores adipisci non alias sint.</p>

</article>

</main>

</div>

<footer class="row">

<div class="col">Footer goes here</div>

</footer>

<script src="js/jquery-3.3.1.min.js"></script>

<script src="js/popper.min.js"></script>

<script src="js/bootstrap-4.3.1.js"></script>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
    S
    sheryltooAuthor
    Known Participant
    May 14, 2019

    I see in that file that it was styled inline. Is that a better way to add your own custom CSS? I am getting so frustrated because I can't seem to get the selector to select the area I want to change and then half the time I can't even get the selector to work. I tried changing some of my classes so they don't all say the same size col but now they all keep saying .container.row. I don't understand why I can't select just the header and make a change to that area only.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 15, 2019

    There are 3 types of CSS code.

    • External -- a separate stylesheet to which all HTML documents are linked.
    • Embedded -- inside <style> tags inside the document <head> tag and below the external CSS.  Takes priority over external stylesheets.
    • Inline -  inside the HTML markup.  <p style="color: red">This paragraph is red</p>  Takes priority over embedded and external stylesheets.  Mainly used for HTML e-mails only.

    When I'm developing a prototype in DW, I embed  my custom CSS inside the <head> tag.  Later, when I move into production,  I transfer embedded code to my custom external styesheet.   Important!  DO NOT EVER edit Bootstrap CSS or JS code.  If you break it, you won't be able to recover.  It's  too complex.  Always use a separate custom stylesheet instead.

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices