Aligning divs to left and center

Question

A)I want my Filters div to be aligned to the left of the Products, not above Products.
B) I want the text in the products div to be closer to the image, not so far away, as in the preview below.
I am using php laravel.

How do I achieve this?

This is the code:

@extends('layouts.app')

@section('content')
<div id="container">

<h1> Filters </h1>

        {!! Form::open(['action' => 'PostsController@store', 'method' =>'POST']) !!}
            <div class="form-group">
                    {{ Form::checkbox('agree', 'yes') }} {{Form::label('id', 'ID')}} <br>
                    {{ Form::checkbox('agree', 'yes') }} {{Form::label('id', 'ID')}}

            </div>

            {{--{{Form::submit('Submit', ['class'=>'btn bt-primary'])}}--}}

        {!! Form::close() !!}

        <h1>Products</h1>
        @if(count($products) > 0)
            @foreach($products as $product)
                <div class="well">
                    <div class="row">
                        <div class="col-md-4 col-sm-4">
                            <img style="width:40%" src="/{{$product->photo}}">
                        </div>
                        <div class="col-md-2 col-sm-2">
                            <h3><a href="/products/{{$product->id}}">{{$product->name}}</a></h3>
                            <small> {{$product->description}}</small>
                        </div>
                    </div>
                </div>
            @endforeach
        @else
            <p>No posts found</p>
        @endif
</div>

@endsection

Any help would be appreciated. Thank you!

This has to do more with CSS styling rather than php or laravel — Dhiraj, Apr 30 '18 at 14:01
col-md-4 col-sm-4 <- Reduce that, change the image width to fit the new value and put filters and products in columns too. If you can't achieve what you want doing this, you will have to write some custom css. — Lou, Apr 30 '18 at 14:07

score 0 · Answer 1 · answered Apr 30 '18 at 14:54

0

This way i guess

<div class='row'>
  <div class='col-md-4'>
     <!--code for filters-->
  </div>
  <div class='col-md-8'>
    <div class='col-md-4'>
      <!--code for Image-->
    </div>
   <div class='col-md-8'>
      <!--code for Desciption-->
   </div>
 </div>
</div>

use col-md-* col-sm-* according to preferences. If image is small to fit in col-md-4 then either enlarge image or reduce col-md-*

answered Apr 30 '18 at 14:54

Ayush Mahajan

639
1
5
14

where s your container class you can also use container and filter outside that – Nikhil S May 24 '18 at 18:18

score 0 · Answer 2 · answered May 24 '18 at 18:29

this will do :

Filters:

    <div class="container">
      <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">image tag here </div>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">description here</div>
      </div>

here is a link to it just resize the output window to see the effect https://jsfiddle.net/pjozbeye/1/

Aligning divs to left and center

2 Answers2