Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Bootstrap + DIV + HTML5 Elements

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 6, 2016 at 3:08 pm #242574
    cd83x
    Participant

    Hello all,

    I am writing to figure out something that I’m a little puzzled about.

    http://codepen.io/cd83x/pen/GqpqaW

    My question is about the ordering of DIVs and HTML5 elements like header, main, nav, etc, within the Bootstrap framework. In other words, is there a best practice when it comes to laying out content within Bootstrap? Should you use DIVs primarily, and assign classes, should you wrap your bootstrap divs inside of your HTML5 elements? I included a link to code-pen hopefully to better illustrate my question.

    Thanks

    June 6, 2016 at 4:48 pm #242576
    I.m.learning
    Participant

    Bootstrap is a framework designed to remove some of the hassles of formatting to create responsive web design. They offer many codes you can copy and paste to complete the task you are asking.

    You build the pages just as you would normal HTML pages. Follow all the rules for HTML5; there are dozens of sites for tutorials on how Bootstrap is used; and you can download it yourself to see what they are using, or you link to a site that hosts it (just like JQuery). You can get it here:
    http://getbootstrap.com/

    Look at this page to see some of the components:
    http://getbootstrap.com/components/

    Now, before starting using Bootstrap, just as with any other programming code, you should perform research. There are some special codes that should be used, I don’t know where I found that info; I just searched for it.

    I built my website with Bootstrap, but it took me 3 days to learn how it works and what I needed to add to my HTML code to ensure it works.

    Truly, it’s up to you on how you want to use it. Is there something in particular you want? Basically, you should already know how your page is going to look because you have designed the page first. Then you look for what it is you want and decide how you want to accomplish the design.

    I will tell you, without understanding it, you’re going to have issues. Start with internet searches and learn about the general aspects of it first before starting to use it. Once you learn the basics, it shouldn’t take much to put it into practice.

    ADDED: check this page
    http://getbootstrap.com/getting-started/

    June 6, 2016 at 5:12 pm #242577
    rkieru
    Participant

    Aside from the necessary includes of relevant stylesheets and javascript, the only special concern for your document formatting is that it must start with <!DOCTYPE html>.

    As to other concerns; no, use whatever best matches your approach to site structure design. Where Bootstrap is concerned there is no different treatment (for example) of <section class="col-md-6"> and <div class="col-md-6">.

    June 6, 2016 at 5:24 pm #242579
    I.m.learning
    Participant

    rkieru,
    The ‘<!DOCTYPE html>’ is HTML5 standard, regardless of Bootstrap. All HTML pages should have that and the other meta tags:
    ‘<meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width,initial-scale=1″>’

    June 7, 2016 at 12:38 am #242597
    Beverleyh
    Participant

    All HTML pages should have that and the other meta tags:
    ‘<meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>’

    Those meta tags are options but they’re not necessary – it depends on your environment. For example, the charset could be sent with a PHP header, or X-UA-Compatible could be set in .htaccess/web.config

    June 7, 2016 at 8:22 am #242621
    rkieru
    Participant

    With regard to &lt;!DOCTYPE html&gt; – yes, this is HTML5 standard. I brought it up in relation to Bootstrap though because the framework requires this declaration in order for everything to be processed correctly. From their website:

    Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

    So it seemed worth mentioning.

    June 7, 2016 at 10:39 am #242627
    I.m.learning
    Participant

    Thats the same reason I put the other meta tags… Just following Bootstrap documentation, as stated in the last link. They didn’t mention putting it in the htaccess as Beverly stated. They say to put it in the html page, but who knows, they don’t say to use PHP but one could do that as well.

    June 7, 2016 at 11:43 am #242634
    Beverleyh
    Participant

    I prefer to take the Bootstrap starter template as a “general suggestion”, only using the bits that I need to, and that I know are necessary for my project – typically just the html5 doctype, viewport meta tag, html5 shim, and core CSS.

    I don’t tend to use respond.js for IE8, jQuery or Bootstrap js

    Neither do I usually bother with the X-UA-Compatability tag. Sure, it helps IE work more effectively, but it isn’t required.

    I guess it comes down to knowing when to make use of the tools in question and making a judgement call on a case-by-case basis :)

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.