gosulove gosulove - 1 month ago 8
CSS Question

Bootstrap how to make Text responsive according to image

My scenario is like this : I have some texts and image inside the Container. Both of them display correctly with different screen sizes.

However, it doesn't display to my expected result when I view it in Desktop.

enter image description here

What I want to achieve is something similar to screenshot(Responsive). Anyone know how to do that?

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<style>
p.solid {border-style: solid;}
</style>
<body>

<div class="container">
<p class="solid">A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.</p>

<p align="center"><img class="img-responsive" src="img/20161014_220509_073.jpg" /> </p>
</div>

</body>
</html>

Answer

actually, bootstrap should do that by its own, but here is the code:

of course, the max-width should be changed to your needs

.container{
    width:100%;
    max-width:500px;
  }
.container img{
    max-width:100%;
    height:auto;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</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">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<style>
p.solid {border-style: solid;}
</style>
<body>

<div class="container">
<p class="solid">A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.</p>

<p align="center"><img class="img-responsive" src="img/20161014_220509_073.jpg" /> </p>
</div>

</body>
</html>

Comments