CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user10498758
user10498758

Reputation: 53

Very simple span and button on the right

My only problem is that the button is not in the same line as the span.

How do I fix this?

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<td>
  <span>Hello</span>
  <div class="text-right">
    <button class="btn btn-default">Test</button>
  </div>
</td>

Upvotes: 1

Views: 76

Answers (2)

Topr
Topr

Reputation: 892

You could float the .text-right for example. See my example here.

.text-right {
  float: right;
}


.text-right {
  float: right;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<td>
  <span>Hello</span>
  <div class="text-right">
    <button class="btn btn-default">Test</button>
  </div>
</td>

Upvotes: 3

Danny
Danny

Reputation: 1113

You could use flexbox to easily achieve this:

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="wrapper">
  <span>Hello</span>
  <div class="text-right">
    <button class="btn btn-default">Test</button>
  </div>
</div>

Upvotes: 1

Related Questions