Twitter Bootstrap Question posted in

How to fit in two images "horizontally" (side by side) using bootstrap so that they don't strech out of the screen? – Twitter bootstrap

enter image description here

I have a login page divided into two parts:

First part: col-sm-4,

Second part: col-sm-8.

I have put one image (1600*1000 px) in the first column and another image (1600*1000 px) in second column.

Below these images lie my footer.

Problems:

Problem 1: The screen needs to be scrolled down until it reaches the footer.

Problem 2: The screen needs to be scrolled right because of the image that is put in col-sm-8.

Desired behaviour:

Want that both these images fit the screen in such a way that one doesn’t need to scroll down or right!

Research done before asking: Plenty!

Here is my html code:

<!DOCTYPE html>
<head>
  <title>Blah!</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css-register/mystyle.css">
  <link href="https://fonts.googleapis.com/css?family=Abhaya+Libre" rel="stylesheet">
  <script src="https://use.fontawesome.com/6eac8c3c32.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>



<body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-heart" style="color:red;"></span>Chat With Crush</a>
      </div>
      <div class="collapse navbar-collapse navbar-right" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="expagaincwc.php">Home</a></li>
            <li><a href="#">blah</a></li>
            <li><a href="#">About</a></li>

          </ul>

      </div>


    </div>
  </nav> 
<!-- nav bar ends here -->


    <div class="row">
      <div class="col-sm-4">
        <img src="../img/fourthimg.jpg" >
      </div>
      <div class="col-sm-8">

          <img src="../img/firstimg.jpg" >
        </a>
     </div>
    </div>



<!-- code for footer -->
  <div class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container-fluid">
      <div class="navbar-text pull-left">
        <p> Copyright 2017 </p>
      </div>
      <div class="navbar-text pull-right">
       <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="false"></i></a>
        <a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="false"></i></a>
        <a href="#"><i class="fa fa-instagram fa-2x" aria-hidden="false"></i></a>
     </div>
    </div>
  </div>

Here is the code for my css:

body{
font-family: 'Abhaya Libre', serif;
}

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
Tags:

3

Answers


  1. 0

    Try add class="image-responsive" to your images

    Login or Signup to reply.
  2. 0

    well…not sure if i got this right because the answer sounds too simple to me 🙂

    did you try using max-width:100%;height:auto; ?

    which i know it’s the same with adding bootstrap class img-responsive but just in case that doens’t work, use the CSS i gave you below.

    let me know if it helps

    see fiddle > jsfiddle

    code added :

     .row img { 
      max-width:100%;
      height:auto
 }

    EDIT :well. that’s because of the bootstrap cols. the cols go one after the other under 768px screen width. you can overwrite that behaviour if you want. see fiddle > fiddle EDIT

    !!! also if you want to have 1/4 and 3/4 you should use col-sm-3 and col-sm-9 . what you are using now, it’s dividing the row into 1/3 + 2/3

    code added:

    @media only screen and (max-width: 768px) {
     .row .col-sm-4 { float:left;width:25%}
     .row .col-sm-8 { float:left;width:75%}
}
    Login or Signup to reply.
  3. 0

    Bootstrap has a default way of dealing with columns. IF you setup on mediu (md) it will use the default when scaling down. So if you want something to be the same on all breakpoints you should start with the smallest one col-xs-4

    <div class="row">
  <div class="col-xs-4">
    <img class="img-responsive" src="http://placehold.it/1600x1000" >
  </div>
  <div class="col-xs-8">
      <img class="img-responsive" src="http://placehold.it/1600x1000" >
 </div>

    Don’t forget the class class="img-responsive" on the images.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search