Need help with buttons in bootstrap

Need help with buttons in bootstrap
0.0 0

#1

Can someone help me and look over my code to see why my buttons are all aligned vertically to the left of my header? I want them to be horizontal, but not sure how to do that? Thank you! http://codepen.io/ameuzela/pen/PWpPEe

Annette Frehner

About Me
Portfolio
Contact Me

About Me

Portfolio

div.header {
position: absolute;
width: 80%;
height: 170px;
margin-left: 78px;
background-color: #0040ff;
text-align:left;
text-indent: 20px;
font-family: montez;
font-size: 50px;
line-height: 0.1;
border-style: ridge;
border-color: #0039e6;
}

.bearimage {
position: absolute;
top: 0;
right: 0;
width: 19%;
height: 170px;
z-index: 1;
}
.row {
}

.aboutme {
background-color: #b3b3b3;
position: absolute;
margin-left: 80px;
margin-top: 63px;
height: 425px;
width: 80%;
text-align:center;
font-size: 22px;
font-family: original surfer;
}

.portfolio {
background-color: #cccccc;
position: absolute;
margin-left: 80px;
margin-right: 80px;
margin-top: 480px;
height: 420px;
width: 80%;
text-align:center;
font-size: 22px;
font-family: original surfer;
}

#content {
position:absolute;
width:100%;
top:120px;
}

body {
background-color: #595959;
background-size: 100%;
background-repeat:no-repeat;
}


#2

Hi,
you forgot to add bootstrap to your page.
Go on settings, CSS, Add External CSS and quick-add Bootstrap.

When you do it, the buttons will work as you expect.


#3

Thank you so very much! I thought I had done that, but
t apparently didn’t save it! It worked! How can I align them to the bottom of the header?
http://codepen.io/ameuzela/pen/PWpPEe


#4

You could use something like this:

.header .row{
  margin-top: 60px;
}  

It works for your current case, I just don’t know if it is the best solution.


#5

Awesome! That actually works, but I can’t resize my font for some odd reason?


#6

The font is being set by the button, so you would have to do this:

.header .row .btn{
   font-size: 20px;
}

I just noticed that in you CSS you just added .row instead of .header .row. While it is working now, it might cause you problems because it will apply to all divs with the .row class.
Using .header .row it applies only to rows inside the header.


#7

Oh I’ll change that. Seriously thank you so much for your help!


#8

Might I suggest adding a [solved] tag to the post title?


#9

Of course! How do I do that?


#10

Perhaps go to the first post and click the edit pen? I haven’t editing a top post so I can’t be 100%.