Hi, I am a newbie coder....and am totally stuck

I’ve almost completed the Tribute Page in
Bootstrap and I’ve looked on w3 schools and stack overflow…
BUT…I’m totally stuck. I’m trying to right align the “click for more info” button at the bottom of the page. I’ve tried everything from setting a pull-right class in my styles as well as text-align:right in various divs before and after…all to no avail. Here’s my code, if some merciful soul would somehow overlook my primitive code … and help me out? Thanks ever so much

<div class="row text-right">
  <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3">
    <a href="http://www.computerhistory.org/babbage/adalovelace/" class="btn btn-success" role="button">click here for more info</a>
   </div>
</div>
</div>

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

CMIIW, since I’m not familiar with bootstrap, isn’t the total column value would 12, so with col-??-3, you get 4 different columns for that width.

I guess you need to put 3 divs dummy so the intended button would be positioned in 4th col position?

Again, I have no knowledge for bootstrap so anyone who knows can correct me too :wink:

Can you give a link to the page and full code? There is a lot that could be happening. Text-align right can’t center block elements. Widths and margins could be coming into play as well. It would help if we could see the whole page :slight_smile:

1 Like

Not sure how your overall page is designed but a simple “float” might just do the trick and save you here.

Thank you so much for helping. I took the button out of the div row and did a “clearfix” class and it worked!..What do you think of my code. I can hardly believe it, but I think I completed my first project!

<head>
  <title>Ada Lovelace</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<style>
  
  h1{
    text-align: center;
    letter-spacing: 5px;
    font-size:4em;
    color: pink;
    margin-top: 30px;
  }
  h2{
    text-align: center;
    letter-spacing: 8px;
    font-size: 1.2em;
  }
  img{
    width: 100%;
    margin-top: 20px;
    margin-botton: 20px;
  }
  p{
    margin-top: 20px;
  }
  
</style>
<body>
  <div class="container text-center">
    <section class="row">
      <h1 class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-uppercase text-center">Ada Lovelace</h1>
      <h2 class="col-lg-12 text-muted text-center">prophet of the computer age</h2>
    </section>
     
    <figure>
        <img class="img-fluid">
        <a href="https://ibb.co/fT9ZL5"><img src="https://preview.ibb.co/mWpqtQ/adalovelacev2sq.jpg" alt="adalovelacev2sq">
     </figure>
  
     <div class="row text-left">
      <div class="col-sm-12 col-md-12 col-lg-4">
      <p><strong>Ada Lovelace (1815-1852) was born Augusta Ada Byron, the only legitimate child of Annabella Milbanke and the poet Lord Byron.</strong> Her mother, Lady Byron, had mathematical training (Byron called her his 'Princess of Parallelograms') and insisted that Ada, who was tutored privately, study mathematics too - an unusual education for a woman.</p>
      </div><!--first bio paragraph-->

        <div class="col-sm-12 col-md-12 col-lg-4">
<p><strong>Ada met Babbage at a party in 1833 when she was seventeen and was entranced when Babbage demonstrated the small working section of the Engine to her.</strong> She intermitted her mathematical studies for marriage and motherhood but resumed when domestic duties allowed. In 1843 she published a translation from the French of an article on the Analytical Engine by an Italian engineer, Luigi Menabrea, to which Ada added extensive notes of her own. The Notes included the first published description of a stepwise sequence of operations for solving certain mathematical problems and Ada is often referred to as 'the first programmer'. The collaboration with Babbage was close and biographers debate the extent and originality of Ada's contribution.</p>
            </div><!--second bio paragraph-->

<div class="col-sm-12 col-md-12 col-lg-4" style="background-color:white;">
<p><strong>Perhaps more importantly, the article contained statements by Ada that from a modern perspective are visionary. </strong>She speculated that the Engine 'might act upon other things besides numbers... the Engine might compose elaborate and scientific pieces of music of any degree of complexity or extent'. The idea of a machine that could manipulate symbols in accordance with rules and that number could represent entities other than quantity mark the fundamental transition from calculation to computation. Ada was the first to explicitly articulate this notion and in this she appears to have seen further than Babbage. She has been referred to as 'prophet of the computer age'. Certainly she was the first to express the potential for computers outside mathematics. In this the tribute is well-founded. </p><br>
        </div><!--third bio paragraph-->

</div><!--row-->
      <blockquote class="blockquote text-left font-italic text-muted">
      "...the Engine might compose elaborate and scientific pieces of music of any degree of complexity or extent."
      <div class="font-style-normal"> – Ada Lovelace</div>
    </blockquote>
        
  <div class="clearfix">
    <a href="http://www.computerhistory.org/babbage/adalovelace/" class="btn btn-secondary btn-success float-right" role="button">click here for more info</a>
</div><!--clearfix-->

    
    </body>

Congrats on getting it going! Here are a couple suggestions:

  • The bootstrap script should be placed after the closing body tag, not in the head. This helps with page loading. If you have it in the head, the rest of the page will wait for the bootstrap js to load. If you place the bootstrap js after the body, the page will load and then the bootstrap js. This is usually preferable (except in cases such as a page loader which doesn’t concern you right now).

  • You need jquery for the bootstrap js to work. You probably haven’t noticed it yet, but this will save you trouble later once it is needed. Also, make sure you include it before the bootstrap js script (remember both after body tag).

  • I would suggest putting your styles in a separate CSS file. This isn’t a big issue for your first project, but once your CSS styles get to be about 100-1000+ lines, it becomes necessary to have it in a separate file for proper organization.

  • I don’t think it’s good to put a section inside a div. Nor is it good to apply row as a class to it. Generally sections are not used for styling. That is what divs are for. So maybe some example markup:
<header></header>

<section id="about">
  <div class="container">
    <div class="row"></div>  
  </div>
</section>

<section id="info">
  <div class="container">
    <div class="row"></div>  
  </div>
</section>

<footer></footer>

Read through the various answers on these for more info:


  • You are doing a little extra work with the row system. Look at your code:
<h1 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></h1>
<div class="col-sm-12 col-md-12 col-lg-4"></div>

Bootstrap breaks down as the screen gets smaller. So if an element is one size on a smaller one, it will be that same size larger unless you explicitly change it. There is no need to duplicate something on a larger screen that exists on a smaller screen. For example:

<h1 class="col-xs-12"></h1>
<div class="col-sm-12 col-lg-4"></div>

From the documentation itself:

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.


These are the basics, the rest will come naturally as you practice more. Keep working hard, and don’t be content with just using something that works. Figure out why it works and the best way to use it.