CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
countercoded
countercoded

Reputation: 59

Why is my text overflowing into my bootstrap row and pushing it down?

This is my first post here but I felt the need to ask this question because I've been trying to figure out the proper solution but haven't had any success..

I've spent more time then I would like to admit trying to figure out row's and column placement and how you can manipulate elements inside them but I'm having a hard time finishing my layout. I would like to place both my buttons where they are at now but not have them shift downward when the quote box fills up with text.

I know what's happening but I can't figure out how to properly fix it.. I believe the margin of the quote-text is pushing the button row downwards when the text over-flows into the buttons div. How do I make it so that the button div/row ignores any text and remains in place in case there is an exceptionally long quote. I will obviously fix the length of quotes eventually but for now I would like to know how to make my buttons stay in place and how I can properly move them left or right without having to rely on text-"(left/right/center)". There has to be a way to more accurately control the position of elements inside a row isn't there?

This is my codepen and code: http://codepen.io/countercoded/pen/Mpjdww

<div class="container">

  <div class="row justify-content-center">
    <div class="col-xs-12 text-center" id="title"><span class="title-text">Random Quote Machine</span></div>
  </div>

  <div class="row">

    <div class="col-sm-12 text-center" id="quote-box">

      <div id="new-quote">Quote goes here.</div>

      <div class="row" id="button-rows">
        <div class="col-6 text-left">      
          <i class="fa fa-twitter fa-3x" aria-hidden="true"></i>
        </div>
        <div class="col-6 text-right">
          <i class="fa fa-comment fa-3x" aria-hidden="true"></i>
        </div>         
      </div>

    </div>

  </div>

</div>




@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);

body{
  background-color: #9e0e0e;
  font-family: raleway;
  font-weight: 400;
}

.container{
  width: 600px !important;
  margin-top:200px;
}



#title{
color: #fff;

.title-text{
  font-size: 40px;
  text-align: center;
  }
}

#quote-box{
  height: 300px;
  background-color: #ffffff;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 3px;
} 
#button-rows{
  padding-top:220px;

}
.fa-comment{
  color: #ba0e0e;
  text-shadow: 2px 2px 1px #ccc;
}.fa-comment:hover{
  color: #910a0a;
}   

.fa-twitter{
  color: #ba0e0e;
  text-shadow: 2px 2px 1px #ccc;
} .fa-twitter:hover{
  color: #910a0a;
}

Thanks for the help!

Upvotes: 0

Views: 1190

Answers (2)

Michael Coker
Michael Coker

Reputation: 53709

I would absolutely position those icons at the bottom. You can do that by positioning the row, and leaving the icon alignment as it is. Then you can add some padding to #new-quote so that the contents of the quote box doesn't overlap those icons, depending on how you want the quotes to look, the length of the quotes, etc.

Including the CSS with the HTML so it loads after bootstrap. Here's an updated codepen http://codepen.io/mcoker/pen/zZZZwM

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
body {
  background-color: #9e0e0e;
  font-family: raleway;
  font-weight: 400;
}

.container {
  width: 600px !important;
  margin-top: 200px;
}

#title {
  color: #fff;
  .title-text {
    font-size: 40px;
    text-align: center;
  }
}

#quote-box {
  height: 300px;
  background-color: #ffffff;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 3px;
}

#button-rows {
  position: absolute;
  bottom: 0.5em;
  left: 1em; right: 1em;
}

#new-quote {
  padding: 1em;
}

.fa-comment {
  color: #ba0e0e;
  text-shadow: 2px 2px 1px #ccc;
}

.fa-comment:hover {
  color: #910a0a;
}

.fa-twitter {
  color: #ba0e0e;
  text-shadow: 2px 2px 1px #ccc;
}

.fa-twitter:hover {
  color: #910a0a;
}
</style>
<div class="container">

  <div class="row justify-content-center">
    <div class="col-xs-12 text-center" id="title"><span class="title-text">Random Quote Machine</span></div>
  </div>
  
  <div class="row">
    
    <div class="col-sm-12 text-center" id="quote-box">
      
      <div id="new-quote">asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</div>
      
      <div class="row" id="button-rows">
        <div class="col-6 text-left">      
          <i class="fa fa-twitter fa-3x" aria-hidden="true"></i>
        </div>
        <div class="col-6 text-right">
          <i class="fa fa-comment fa-3x" aria-hidden="true"></i>
        </div>         
      </div>
      
    </div>
    
  </div>
  
</div>

Upvotes: 1

Aslam
Aslam

Reputation: 9690

You have to use Position property to fix them to the bottom of your box.

Here i am using the position:absolute property. More about position can be found here : https://developer.mozilla.org/en/docs/Web/CSS/position

Check the fiddle below:

http://codepen.io/hunzaboy/pen/yMMMMv

I have added the following code.

#quote-box{
  padding-bottom: 60px; /* so that the icons dont overlapp the text*/
}

#button-rows{
  position: absolute;
  bottom: 10px;
  width: 100%;
}

Upvotes: 0

Related Questions