Results 1 to 2 of 2

Thread: Bootstrap coding help needed for a beginner

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Junior Member
    Join Date
    Aug 2015
    Posts
    4

    Bootstrap coding help needed for a beginner

    Hi,

    I have the below code. I am trying to understand. If you could provide some explanation, it would be so helpful.

    HTML Code:
    <div class="container-fluid">
      <h1>Hello World!</h1>
      <p>Resize the browser window to see the effect.</p>
      <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
        <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
      </div>
    </div>
    What is the code saying?

    If the device is a tablet, then do what?This code does not mention for other devices. What if the mobile device or desktop or large desktop?


    Thanks.
    Last edited by BSTRAP; 08-31-2015 at 03:44 PM.

  2. #2
    Line 1: Set up the container to use responsive layout
    Line 2: Give me a heading of 1; or a Title
    Line 3: Tell them they can resize the browser and it should fit their phone!
    Line 4: We are going to use the grid system so grab out CSS and see what can do here! (try row-fluid if you want a nice quarter of an inch gap on both sides of your site)
    Line 5,6,7: We are going to execute the grid system so our items will stack when used on phones, but on browsers they will appear side by side!
    Everything after the col-sm-4 closes your divs, so you mentioned tabets and not mentioning other devices, it's because twitter is responsive that it works on every platform you want to make a site for your nav menu will resize and make it mobile friendly, carousal, images ect. it's all pre-made to get your work done faster you will just have to use your styles to style the stuff you want to look a certain way, best way is take out all the defaults;

    Code:
    <button class="btn btn-defaut">something</button>
    Taking the default out and doing something like this;
    Code:
    <button class="btn customed">something</button>
    
    <style>
    .customed{
    background-color:#000;
    border:0;
    border-radius:0;
    color:#fff;
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •