Bootstrap 4 fixed width and fluid

Question

I put together a simple grid that I want the photo on the left to have a fixed width of 200px but the right content to be fluid. I'm using bootstrap 4

https://jsfiddle.net/chapster11/oryq1k9t/1/

<div class="container-fluid">
  <div class="row">
    <div class="photo">
        <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail"/>
     </div>
    <div class="col-sm-12">
      <div class='title'>MY Title</div>
      <div class="description">Description text example</div>
    </div>
  </div>
</div>

Do you still want your image to responsive in the way that it resizes down if there isn't enough space? — Klooven, Nov 30 '17 at 10:30

score 0 · Answer 1 · answered Nov 30 '17 at 04:04

0

did you mean will place image on right ? just like this?

I just added align:right .fyi

answered Nov 30 '17 at 04:04

Hatchwald

300
2
13

Thanks Hatchwald. No I mean keep the image on left with width of 200px then have the info content beside that but fluid layout. – me-me Nov 30 '17 at 04:50

kiranvj · Answer 2 · 2017-11-30T15:17:37.373

NB: this is using Bootstrap 4 beta. You are using BS alpha 2. Either use alpha 6 or beta

img{
  width: 200px;
  border:1px solid green;
}

.photo{
  border:1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <div class="container-fluid">
      <div class="row no-gutters">
        <div class="col-auto">
            <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail photo"/>
         </div>
        <div class="col bg-dark text-light">
          <div class='title'>MY Title</div>
          <div class="description">Description text example</div>
        </div>
      </div>
 </div>

Try this

<div class="container-fluid">
  <div class="row">
    <div class="col-6 photo">
        <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail"/>
     </div>
    <div class="col-6">
      <div class='title'>MY Title</div>
      <div class="description">Description text example</div>
    </div>
  </div>

If you need to make it work in alpha 2, use col-xs-* classes. See the below code.

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 photo">
        <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail"/>
     </div>
    <div class="col-xs-6">
      <div class='title'>MY Title</div>
      <div class="description">Description text example</div>
    </div>
  </div>

Another version

img{
  width: 200px;
  border:1px solid green;
  float:left;
  margin:20px;
}

.photo{
  border:1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <div class="container-fluid">
            <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail photo"/>
          <div class='title'>MY Title</div>
          <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur suscipit elit purus, in aliquam elit auctor in. Proin vitae purus sit amet massa ullamcorper sodales. Fusce sed magna sollicitudin, tincidunt nulla non, sodales purus. Vivamus pulvinar semper magna. Etiam finibus vel tellus malesuada bibendum. Donec iaculis libero quis neque condimentum elementum. Phasellus vestibulum, quam sed feugiat ullamcorper, augue massa sodales eros, quis porta mauris urna eu nisi. Pellentesque mattis ante mauris, eget sodales eros facilisis et. Aliquam tristique scelerisque mauris, at finibus urna rhoncus id. Integer euismod nunc quis arcu consectetur, nec mattis nunc sagittis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Sed sed sollicitudin felis. Fusce vitae risus dui. Morbi pulvinar sollicitudin nisl non pulvinar. Proin non nunc fermentum, elementum mi at, cursus nisl. In non felis id mi fringilla tincidunt. Sed ullamcorper rutrum consectetur. Nunc volutpat scelerisque nulla in blandit. Quisque auctor sagittis tellus a auctor. Vivamus malesuada pellentesque lorem eu sollicitudin. Maecenas tristique nisi fringilla eros scelerisque, porta faucibus nibh ornare. Morbi ultricies orci et ex tincidunt bibendum. Nullam congue tempus elit, faucibus rutrum libero consequat quis. In luctus mattis fringilla. Maecenas convallis id magna ut tempus. Donec sollicitudin fringilla diam, et placerat magna feugiat et.</div>
 </div>

Thanks Kiranvj, I'm looking for the second col to take up the rest of the space on the right of the page and not to be set to a specific col space col-xs-6. Can that be done. — me-me, Nov 30 '17 at 14:28
Also "this is using Bootstrap 4 beta. You are using BS alpha 2. Either use alpha 6 or beta" ? Why what is wrong with BS alpha 2 which I'm using ? — me-me, Nov 30 '17 at 14:30
kiranvj I'm so sorry I deleted the fiddle by mistake in my dashboard. Again sorray as I know you already linked to 2 versions. — me-me, Nov 30 '17 at 15:05
Thanks Kiranvj that works too but ends up wrapping the image. What I was after I ended up answering myself using the utilities display flex. But your answer is also good to know how to do it without utils flex. See my post https://jsfiddle.net/chapster11/8p8s3hy5/ — me-me, Nov 30 '17 at 16:01

score 0 · Answer 3 · answered Nov 30 '17 at 13:01

You can use this to make the photo col only use required space.

.search-thumbnail{
  width: 200px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-auto">
      <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail"/>
    </div>
    <div class="col">
      <div class='title'>MY Title</div>
      <div class="description">Description text example</div>
    </div>
  </div>
</div>

The example uses Bootstrap 4 beta 2.

score 0 · Answer 4 · answered Nov 30 '17 at 15:10

So I found the utilities class in bootstrap 4 did the trick I was looking for. fiddle example for anyone trying to achieve this with bootstrap 4.

https://jsfiddle.net/chapster11/8p8s3hy5/

HTML

<div class="d-flex">
  <div class="photo">
            <img src="https://static.pexels.com/photos/46710/pexels-photo-46710.jpeg" alt='Search Result Photo' class="search-thumbnail"/>
  </div>
  <div class="info ml-sm-3">
    Balint Zsak Someone’s Knocking at My Door 01.12.13
  </div>
</div>

CSS

.photo{
  width: 200px;
  flex: 0 0 200px;
}
.photo img{
  max-width: 100%;
}
.info{
  border:1px solid blue;
  flex:0 1 auto;
}

Bootstrap 4 fixed width and fluid

4 Answers4