Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap col-md issues taking full width

I was trying to implement bootstrap in my project..But the col-md-3 is taking the full width of a container

The following is the code:-

<!DOCTYPE html>
<html>
<head>
    <title>Home page </title>
</head>
<body>



<div class="container">
    <div class="row">
      <div class="col-md-4-offset-4">
       <div class="avatar">
         <h1>Special feature</h1>
       </div> 
      </div>
    </div>
 </div>

  <div class="containe-fluid">
    <div class="row" >

      <div class="col-md-3" style="width:25%;">
        <div class="box">
          <img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
          <p>
                <a href="">Dell Latitude E4300 Refurbished Laptop<br>  $169
          </p>
          <button> Buy</button>
        </div>
      </div>

      <div class="col-md-3" style="width:25%;">
        <div class="box">
        <img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
          <p>
            <a href="#">HP 255 UBUNTU</a><br>$229.00
          </p>
          <button> Buy</button>
        </div>
      </div>

      <div class="col-md-3" style="width:25%;">
        <div class="box">
          <img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
          <p>
            <a href="#">Lenovo Thinkpad B50</a><br>$229.00
          </p>
          <button>Buy</button>
        </div>
      </div>

      <div class="col-md-3" style="width:25%;">
        <div class="box">
          <img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
          <p>
                <a href="#">HP 255 Quad Core</a><br> $269.00
          </p>
        </div>
      </div>
    </div>
  </div>    
</body>
</html>

I am unable to put the diffent products in one line and it is coming one below the other Please help me am a newbie and am caught up.

like image 972
Hardik Patil Avatar asked Mar 15 '23 13:03

Hardik Patil


2 Answers

Avoid the use of inline width: 25% for the col-x-* classes. Also for supporting mobile width, Add col-xs-6.

col-xs- has no minimum screen size, so it makes sense to always include it. This is further explained in this Boostrap Grid Sizes post. To save you some reading, the main bits of interest are:

  • .col-xs-: Phones (<768px)
  • .col-sm-: Tablets (≥768px)
  • .col-md-: Desktops (≥992px)
  • .col-lg-: Desktops (≥1200px)

To add offset, use col-md-offset-4

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-md-6 col-md-offset-4">
      <div class="avatar">
        <h1>Special feature</h1>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">

    <div class="col-xs-6 col-md-3">
      <div class="box">
        <img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
        <p>
          <a href="">Dell Latitude E4300 Refurbished Laptop<br>  $169
          </p>
          <button> Buy</button>
        </div>
      </div>

      <div class="col-xs-6 col-md-3">
        <div class="box">
        <img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
          <p>
            <a href="#">HP 255 UBUNTU</a>
          <br>$229.00
        </p>
        <button>Buy</button>
      </div>
    </div>

    <div class="col-xs-6 col-md-3">
      <div class="box">
        <img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
        <p>
          <a href="#">Lenovo Thinkpad B50</a>
          <br>$229.00
        </p>
        <button>Buy</button>
      </div>
    </div>

    <div class="col-xs-6 col-md-3">
      <div class="box">
        <img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
        <p>
          <a href="#">HP 255 Quad Core</a>
          <br>$269.00
        </p>
      </div>
    </div>
  </div>
</div>
like image 158
m4n0 Avatar answered Mar 23 '23 20:03

m4n0


Plz add Bootstrap link to the page in the head section

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Also, remove width=25% from the columns

also, change

<div class="containe-fluid">

to

<div class="container-fluid">
like image 33
Amanjot Kaur Avatar answered Mar 23 '23 19:03

Amanjot Kaur