Having trouble with the row function

1

I think the main problem is that I am having problems importing bootstrap along with all the required elements in my code. I am working on Codepen btw.

As mentioned in the tutorial, I have the following code entered on top of my html.

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

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

rapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 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>
<link http://getbootstrap.com/css/#images>

The following is what I have coded for my row. Right now it is at a testing phase with text labelled button in each column. But I would eventually like to have pictures in the columns. It is currently labelling text from each column one on top of the other.

<div class="container-fluid">
<div class="row" id="Run-Column">
  <div class="col-md-6">
    <p> button </p>
  </div>
  <div class="col-md-6"id="Run-Column">
    <p> button </p>
  </div>
</div>  
</div>

All the help is greatly appreciated

Thanks

3

Give us a link to your pen ! :slight_smile:

4
5

Ok, a couple of things to start with:

  • in Codepen you can set Bootstrap by going into Settings > CSS > quickadd : bootstrap.
  • if you want to link it from your HTML instead then make sure your tags are correct ( I see a > that has nothing to do there).
  • jquery should be linked just before your </body> tag, but again you can add it via Codepen Settings if you want.

Now about Bootstrap Grid, you might want to take a look at this pen - it’s a basic illustration of how it works - and I certainly don’t claim to be an expert but I think it should put you on the right tracks.

You’ll see that everything is enclosed between <div class="container"> . try with and without it to see the difference.

1 Like
6

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

I also deleted the other post because it’s a duplicate of the first one.