CODEWITHSUNDEEP
csstwitter-bootstrap
Igor Schekotihin
Igor Schekotihin

Reputation: 177

Positioning a button with CSS and Bootstrap

I am trying to place my "tweet" button next my "generate quote" button, but for some reason the css doesn't work. I tried using top: 50%, margin-top: 50%, placed it in another div under the "quote" div, targeted it with #, but it still stays in the top left corner. What can be the reason?

https://codepen.io/s4ek1389/pen/zZGNWw?editors=1100

HTML 

<head>
  <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>

<div class="main">  
  <div id="quote">
    <h1>There is nothing either good or bad, but thinking makes it so.</h1>
   <h4>William Shakespeare</h4>
    </div>

  <div class="containter">
<div class="row">
  <button type="button", class="btn  btn-primary", id="gen"> Generate Quote!
  </button>

  <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-show-count="false" id="tw">Tweet</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
  </div>
</div>

CSS

.main {
  background-image:url("http://wallpapercave.com/wp/mVcZwOP.jpg");
background-size:cover;
min-height: 640px;
margin: 0 auto;
position:relative;
width:100%;
max-width:1680px;

}

#quote {
 text-align:center;
 width:70%;

}
h1 {

  position: absolute;
  top: 30%;
  font-size:5vw;
  background-color:rgba(173, 29, 125, 0.5);
  color:white;
  font-family: "Comfortaa", cursive;
  text-align:center;
  display:block;
}

h4 {
  top:60%;
  font-size:3vw;
  background-color:rgba(173, 29, 125, 0.5);
  color:white;
  font-family: "Comfortaa", cursive;
  position:absolute;

  display:inline-block;

}

#gen {
  top:80%;
  position: absolute;
  left:42%;
  display:inline;
}

#tw {
 top:50%;
 position:absolute;
 margin-top:50%;

}

Upvotes: 2

Views: 408

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

Instead of absolutely positioning each individual element, you can put all of this text/button content in a single element that you absolutely position, then relatively position the contents of that element relative to one another. It will make things a lot easier.

The main issue with your twitter button is that the code you put in your HTML is just a placeholder that is replaced with an iframe for the twitter button, so you're styling the wrong element. You don't want to style #tw, you want to style #twitter-widget-0, which is the ID of the rendered iframe that the twitter button creates. But if you put that code in an element like I mentioned above, you shouldn't need to style that button.

.main {
  background-image: url("http://wallpapercave.com/wp/mVcZwOP.jpg");
  background-size: cover;
  min-height: 640px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 1680px;
}

#quote {
  text-align: center;
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
}

h1 {
  font-size: 5vw;
  background-color: rgba(173, 29, 125, 0.5);
  color: white;
  font-family: "Comfortaa", cursive;
}

h4 {
  font-size: 3vw;
  background-color: rgba(173, 29, 125, 0.5);
  color: white;
  font-family: "Comfortaa", cursive;
  display: inline-block;
}

#gen {
  margin-right: 1em;
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<head>
  <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>

<div class="main">
  <div id="quote">
    <h1>There is nothing either good or bad, but thinking makes it so.</h1>
    <h4>William Shakespeare</h4>
    <div class="buttons">
      <button type="button" class="btn  btn-primary" id="gen"> Generate Quote!</button>
      <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-show-count="false" id="tw">Tweet</a>
      <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions