asked on 1/23/2018

Bootstrap CSS Override

How can I get my image and getFile on the same row? I must be missing something...

JSFiddle

<form class="center-block form-horizontal">
  <div class="form-group row">
    <label class="col-sm-12 col-md-2 col-form-label" for="getFile">Image:</label>
    <div class="col-sm-12 col-md-10">
      <a href="#image">
        <img class="thumbnail" src="https://www.arborday.org/images/hero/medium/hero-ring-of-trees-looking-up.jpg">
      </a>
      <input class="form-control input-lg" id="getFile" style="width:80%; display:inline; float:right;" type="file">
    </div>
  </div>
</form>

Open in new window

CSS Bootstrap

Last Comment

Julian Hansen

1/25/2018

ASKER CERTIFIED SOLUTION

David S.

1/24/2018

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

SOLUTION

Julian Hansen

1/24/2018

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Julian Hansen

1/24/2018

With respect to the accepted answer

Floated elements don't float up, next to non-floated elements, including inline elements in a line box above them

This is not correct. Consider the following code

<html>
<head>
<style type="text/css">
div {
	float: right;
	
}
</style>
</head>
<body>
<a>Non floated inline element</a>
<div>Floated block element</div>
</body>
</html>

Open in new window

Will produce the output

Michael Vasilevsky

1/24/2018

ASKER

I appreciate the extra info Julian! That clarifies things

David S.

1/25/2018

Julian, you're right. I was misremembering how that works these days. I was describing the old behavior which was changed years ago. IE7 and Firefox 3.0 show the old way that was handled. Thanks for correcting me.

Although come to think of it, I wasn't talking about a plain inline element; I was talking about one that had a child with display:block (as in the Fiddle). I should have been clearer what I was talking about. So really, we're both correct and the code suggestion we each made had the same affect.

Julian Hansen

1/25/2018

Understood, I was referring to
next to non-floated elements, including inline elements in a line