How can I align my buttons in a specific place? When I shrink the screen to a mobile size the buttons jump under my bear pic and that’s not where I want them. https://codepen.io/ameuzela/pen/PWpPEe
What about moving the buttons into their own row below the h1 and image stuff?
See sample below.
<div class="row">
<div class="col-xs-9">
<h1>Annette Frehner</h1>
</div>
<div class="col-xs-3 bearimage">
<img class="img-responsive" src="http://i68.photobucket.com/albums/i25/frangipane/animals/tumblr_njkh05VKkO1spq83no1_1280.jpg"/>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<button class= "btn btn-primary active" >About Me</button>
</div>
<div class="col-xs-1">
<button class="btn btn-primary active" >Portfolio</button>
</div>
<div class="col-xs-1">
<button class="btn btn-primary active" >Contact Me</button>
</div>
</div>
That does work, but then I can’t stretch my bear pic to the bottom of that div. Or is there a way to do that?
Most definitely, honestly I have no idea what your final product should look like so i’m kinda shooting in the dark but you can make the image fit its container by setting a max-height on the header container. Then you can set the same max-height on the bear image. See the updated pen.
I also moved everything into a single row.The buttons are nested inside the column along with your header text (h1) and The bear image takes up the rest of the row’s space next to the header text column
so you have something like this.
----------------------------------------------------------------------- row ------------------------------------------------------
---------------------header text h1 (col 8)-------------------- | ---------------------bear image (col 4) -------------
--------------- nav buttons (col 4) -------------- |
1 Like
Thank you so much!!! You are so helpful, and I appreciate how you put that in a diagram, because that makes so much more sense!