CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Ji Yicheng
Ji Yicheng

Reputation: 65

grid system not working | bootstrap

recently i am building a website using bootstrap & restful js. And i expect the website show like this enter image description here

but now i shown like this: enter image description here

the content should be shown both left and right, but my version only shows on the left

menu.html

<main class="row">
    <div class="col-md-12">
		<h1 class="text-uppercase text-center">Our Menu</h1>
	</div>

	<div class="row" id="appetizers">
		<h1 class="text-uppercase text-center " style="font-size:4rem, text-color:#FF0000">Appetizers</h1>
	</div>
</main>

and my menuHelper.js

var HTMLAppetizerStart = '<div class = "appetizer-entry row"></div>'
var HTMLAppetizerFoodName = '<h3 class="col-md-2">——</h3><h3 class="col-md-10 text-uppercase" style="letter-spacing:0.1em">%data%</h3>'
var HTMLAppetizerFoodPrice ='<p class="col-md-2" style="font-weight:700;letter-spacing:0.14em">%data%</p>'                              

var HTMLAppetizerFoodMaterial ='<p class="col-md-10">%data%</p>'

the appetizer-entry class i set the width is 50%

any suggestions?

Upvotes: 0

Views: 337

Answers (4)

wdfc
wdfc

Reputation: 374

You are using too large a column for each row. The grid system works as 12 columns = one row.

If you want them to sit next to each other, you can put the price into a col-md-3 and the dish into a col md-3, and it will fit 2 menu items per line, instead of one. You have the price in a col-md-2 (which takes up 2 units) and the name of the dish in a col-md-10(which takes up 10) the total adds up to a whole row (12 units).

If you want them to center differently..you can add offset to your columns. This is kinda like you are adding blank columns to make your rows appear differently. http://getbootstrap.com/css/#grid-offsetting

Upvotes: 0

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

This Is Example Of Your Question . Check Once Any Resolution It Will Be Automatically Adjusted . 

.header h1{
color:#f69c55;
  text-align:center;
}
.col-bd-8 h5{
  color:#333;
  vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-md-12 header">
  <h1>Appeitzers</h1>
  </div>
  </div>
  <div class="row">
    <div class="col-sm-6" >
    <div class="row">
    <div class="col-sm-4" >$7.95</div>
    <div class="col-sm-8" ><h5>SUNOMONOCOMBINATION</h5></div>
    </div>
    </div>
    <div class="col-sm-6">
    <div class="row">
    <div class="col-sm-4">$7.95</div>
    <div class="col-sm-8" ><h5>SUNOMONOCOMBINATION</h5></div>
    </div>
    </div>
    </div>
  <div class="row">
    <div class="col-sm-6" >
    <div class="row">
    <div class="col-sm-4" >$7.95</div>
    <div class="col-sm-8" ><h5>SUNOMONOCOMBINATION</h5></div>
    </div>
    </div>
    <div class="col-sm-6">
    <div class="row">
    <div class="col-sm-4">$7.95</div>
    <div class="col-sm-8" ><h5>SUNOMONOCOMBINATION</h5></div>
    </div>
    </div>
    </div>
</div>

Upvotes: 1

user6002037
user6002037

Reputation:

You need to wrap a container around the row to ensure the grid works -<div class="container"> The below should work. See more details here

<div class="container">
   <main class="row">
    <div class="col-md-12">
        <h1 class="text-uppercase text-center">Our Menu</h1>
    </div>

    <div class="row" id="appetizers">
        <h1 class="text-uppercase text-center " style="font-size:4rem, text-color:#FF0000">Appetizers</h1>
    </div>
  </main>
</div>

Upvotes: 0

ReGdYN
ReGdYN

Reputation: 536

Allthough I don't fully get your code, I think, you should be replacing the var HTMLAppetizerStart value with this:

var HTMLAppetizerStart = '<div class = "appetizer-entry col-md-6"></div>';

Upvotes: 0

Related Questions