+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: bootstrap align image to the right and make it static (/showthread.php?tid=5807939)
bootstrap align image to the right and make it static - Kjetil - Mar 5, 2018
https://prnt.sc/in85ez
this is how it should look
i am using bootstrap and laravel and i am very newbie with webdesign
so whats the problem? i am currently using an white image in the middle to hold the image to the right floating right because it will move to the center without it
i want to fill up the middle with content but its impossible because the image on the right will move
here is my code
PHP Code
<?php
@section('content')
@for($i = 0; $i < 50; $i++)
<div class="container-fluid">
<div class="row">
@if($i % 2 == 1)
<div class="col-md-4"><img alt="" src="white.jpg" class="img-responsive"></div>
<div class="col-md-4"><img alt="" src=white.png" class="img-responsive center-block"></div>
<div class="col-md-4"><img alt="" src="white.png" class="img-responsive pull-right"></div>
@else
<div class="col-md-4"><img alt="" src="z1.jpg" class="img-responsive"></div>
<div class="col-md-4"><img alt="" src=white.png" class="img-responsive center-block"></div>
<div class="col-md-4"><img alt="" src="z2.png" class="img-responsive pull-right"></div>
@endif
</div>
</div>
@endfor
@endsection
🤝 🤝 🤝 🤝
RE: bootstrap align image to the right and make it static - Rushax - Mar 5, 2018
Why are you putting md-4 for that tiny image?
If it were me I would do it this way:
Code
<div class="container-fluid">
<div class="row">
<div class="col-md-2"><img class="img-responsive" src=".."></div>
<div class="col-md-8"><h1>Content</h1></div>
<div class="col-md-2"><img class="img-responsive" src=".."></div>
</div>Or if you do want the center to have smaller just change the col-md-8 and the last col-md-2 to:
Code
<div class="col-md-offset-2 col-md-4">..</div>
<div class="col-md-offset-2 col-md-2">..</div>Maybe it's not filling the content with anything because there isn't any content inside the middle div?