CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
TheShield
TheShield

Reputation: 307

Align text in a drop-down form Bootstrap

I have an inline form in a row that contains an email form and a drop down form. After resizing, the text on the drop down has lost its original positioning (text on the left, arrow on the right.) I tried using:

text-align: left;

However, my arrow is not aligned to the right, and I have no idea how to do so.

Text is aligned left correctly, but arrow is not aligned right.

HTML file:

<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div class="row justify-content-center">
    <form class="form-inline">
      <div class="form-group">
        <div class="col-md-8">
        <input type="email" class="form-control" placeholder="Email Address" id="email-form">
      </div> 
       </div>
      <div class="dropdown">
        <div class="col-md-8">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown"> Interested In... </button>
        </div>
      </div>
    </form>
    </div>
  </div> 
</body>
</html>

CSS file:

body
{
  background: #000639;
}

#email-form 
{
    line-height: 250%;
    margin-right: 115px;
    width: 158%;
}

#dropdown
{
    line-height: 250%;
    width: 238%;
    text-align: left;
}

.row
{
    margin-top: 10%;
}

Full screen:

enter image description here

Upvotes: 1

Views: 3990

Answers (3)

user3054925
user3054925

Reputation:

This effect can easily be obtained by using Flexbox. Add display:flex; to your #dropdown definition and set align-items: center; so that the elements will be centered vertically within its container.

To make sure your first element sticks to the left, and the right dropdown arrow sticks to the right. You can set justify-content: space-between, this will try and fill up all the space between the two items.

#dropdown {
  line-height: 250%;
  width: 238%;
  text-align: left;
  display:flex;
  align-items: center;
  justify-content: space-between;
}

Long live flexbox!

Upvotes: 0

trav
trav

Reputation: 376

Adjust the left-margin to the ::after selector.

jsfiddle

.dropdown-toggle::after{

margin-left: 3.3em;
}

Upvotes: 0

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

You can target the arrow by using the ::after selector. 

.dropdown-toggle::after {
    position: absolute;
    top: 26px;
    right: -155px;
}


body {
  background: #000639;
}

#email-form {
  line-height: 250%;
  margin-right: 115px;
  width: 158%;
}

#dropdown {
  line-height: 250%;
  width: 238%;
  text-align: left;
}

.row {
  margin-top: 10%;
}

.dropdown-toggle::after {
    position: absolute;
    top: 26px;
    right: -155px;
}
<html>

<head>
  <title>Demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="row justify-content-center">
      <form class="form-inline">
        <div class="form-group">
          <div class="col-md-8">
            <input type="email" class="form-control" placeholder="Email Address" id="email-form">
          </div>
        </div>
        <div class="dropdown">
          <div class="col-md-8">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown"> Interested In... </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Related Questions