user6680 user6680 - 3 months ago 7
CSS Question

Body{} not being recognized, but other tags are

I'm trying to figure out the best way to go about spacing words in a bootstrap grid. col-md-1 is too close together in the header bar and col-md-2 is to far. I don't think I can just use  /padding-left: and then col-md-1 and not break the grid. What is the best way to go about spacing the words between md-1 and md-2?

So basically I want Chicken Beef and Steak to be closer, but not too close because col-md-1 makes them too close to each other and I don't want to break the grid.

enter image description here

<div class="container">
<div id="header">
<div class="row">

<div class="col-md-3">


{{"Recipes"}}

</div>

<div class="col-md-3">
{{"Chicken"}}

</div>
<div class="col-md-2">
{{"Beef"}}

</div>

<div class="col-md-2">
{{"Steak"}}

</div>
</div> <!--end row-->



</div> <!--end header-->

</div> <!--end container-->

Answer

Bootstraps columns work on a 12 grid system. Meaning if you want things to be centered, everything should add up to 12 to make things evenly spaced.

here is one way to solve this, but please post more specific questions and look through SO first.. there are answers to this elsewhere for sure.

Also try to fix your spacing before posting :P!

css

.row{
  width:75%;
  margin:0 auto;
  text-align:center;
}

html

<div class="container">
  <div id="header">
    <div class="row">

      <div class="col-md-3">
        {{"Recipes"}}

      </div>

      <div class="col-md-3">
        {{"Chicken"}}

      </div>
      <div class="col-md-3">
        {{"Beef"}}

      </div>

      <div class="col-md-3">
        {{"Steak"}} </div>
    </div>
    <!--end row-->


  </div>
  <!--end header-->

</div>
<!--end container-->