Portfolio challenge; bootstrap grid row with col & h2

1

Starting portfolio challenge and getting stuck right away. I’d like my name on the left hand side of a row using bootstrap 3 col grid, preferably with using an h2 header and buttons on the right hand side of the row. If I use this code my name does not appear to be in the same line as the buttons. However, if I remove the h2 and just use something like plain text or em, it is on the same line. Can headers be used in the same line as col objects?

<style>
.custom-button-width {
	width:150px;
}
.custom-input-width {
	width:150px;
    margin-right:3px;
}

  h2 {
    font-family: Lobster, Monospace;
  }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<div class="container-fluid">
   <div class="row">
    <div class="col-md-6" "text-left">
      <h2>opalko<h2/>
     </div>
    <div class="col-md-6 text-right">
    		<button type="button" class="btn custom-button-width btn-info ">about</button>
			  <button type="button" class="btn btn-warning custom-button-width .navbar-right">portfolio</button>
    	  <button type="button" class="btn btn-danger custom-button-width .navbar-right">contact</button>
    	</div>
  </div>
</div>
2

I tried it, but it looks to be on the same line. You have a few minor errors in your code though (maybe that fixes the problem):

  • <div class="col-md-6" "text-left"> : class should be one string

  • <h2>opalko<h2/> : the closing tag should be </h2>

  • <button type="button" class="btn btn-warning custom-button-width .navbar-right">portfolio</button> :
    .navbar-right is not with a dot

3

Thanks for looking at it. I made the corrections to these errors and the h2 part is still not on the same line.

https://codepen.io/opalko/full/GyvyoV/

4

They are on the same line, but h2 has a default margin-top. If you set it to 0 you will see that they are indeed on the same line:

h2 {
  font-family: Lobster, Monospace;
  margin-top: 0;
}
1 Like
5

I am so very new to this; thank you!

1 Like