CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrapbackground-image
Gaurav
Gaurav

Reputation: 11

bootstrap one row contain two col. one contain image and other background image

We are using bootstrap, when I take a row and divide it into two column(col--6 and col--6), then one column contains the responsive image having img-responsive class and other col contains the description of the image having background color/image. but this color/image size is not equal to first column having image when I viewed it on mobile screen. Here is my code:

.myfontpage{ background:URL(Image/main.jpg) center no-repeat; width:100%; height:100%; }

.myfontpage h1,p{padding:15px 30px;  text-align:center; font-size:4vw;}
<div class="row">
     	<div class="container">
    	<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <img src="Image/main.jpg" alt="Can not Display" class="imp-responsive"/>
        </div>
    	
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 myfontpage">
          <h1>Welcome to Yoga fitness club</h1>
			<p>This is free template. only for the practices </a></p>
        </div>
      </div>
</div>

Upvotes: 0

Views: 1117

Answers (2)

Nikhil Batra
Nikhil Batra

Reputation: 3148

I think you have not included the js and css files for bootstrap. You can include it in your project by downloading it or using the following CDN:

For CSS:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

For JS:

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Upvotes: 0

Amanjot
Amanjot

Reputation: 2058

As much I have understood your question, I think you need both the columns of same size. try removing width:100%; height:100%; from 'myfontpage' class.

Upvotes: 1

Related Questions