CODEWITHSUNDEEP
csstwitter-bootstrap
Mr.Web
Mr.Web

Reputation: 7154

Remove spaces in Bootstrap row

I have the following output:

enter image description here

I want to lessen the white margins and make it look thinner.

This is the code:

<div class="container">
<div class="spacer-big"></div>
<div class="spacer-big2 hidden-xs hidden-sm"></div> 
<div class="row">
    <div class="col-md-1">&nbsp;</div>
    <div class="col-md-8 col-xs-10">
        <div id="container">

            <!-- Content -->

        </div>
        <div id="footer">

            <!-- footer -->

        </div>
     </div>
     <div class="col-md-1">

         <!-- Other stuff -->

     </div>
</div>

I'm trying to figure out how to remove the white space (or leave just a little of it); I tried looking for "nopadding" class and other solutions but can't figure it out...

Note: "spacer-big" is a class handling height and not width

Upvotes: 0

Views: 2473

Answers (1)

LOTUSMS
LOTUSMS

Reputation: 10260

You hard-coded the widths on the images to create the gap Bootstrap is built on a 12 grid. Your grid totaled 12 horizontally, and your paddings were fine. So I checked your inline styles code. (which you should never do by the way) send all the css to the stylesheets. And noticed your widths and heights were pre-set. I tried cleaning your code but there isn't a fix. It needs re-constructed.

Site architecture is one of the first classes in Software Engineering for a good reason. I'll list some of the things you need to mind

  1. If you're going to use bootstrap, make use of its grid.
  2. Do not use such <div class="spacer-big"></div> to create a space between two containers. There are better ways to do this by simply adding a margin-top:20px to the container underneath or by using Bootstrap's <div class="clear"></div>
  3. Your site shows two main columns in the content with images in them. Divide that main container into to child 50% columns. And simply display:block your images in them so they stack. If you need a margin between them. Add one.
  4. Your site architecture, as I mentioned above, is setting the pace for a bad page from the beggining. If you build the page skeleton right, You will have minimal debugging to do inside. If you half-ass it, you'll spend a lot of time fixing errors to compensate for the lack of architecture. Follow the natural order of containers <body><header><nav><container><footer>
  5. Use wrappers and parent-child relationships so that you can distribute the elements properly to add 12 across your site. For instance, if you have two small columns on the side and one wide one in the center, you may consider using col-md-1---col-md-10 ---col-md-1 That will distribute evenly accross.
  6. Avoid inline-styles. I explained this. Use your css sheets and try not to create a class for everything you use. Learn how to map and target your img or p elements by using it's parent's class or id
  7. Last but not least. Avoid position:absolute like the plage. You want a fluid build. Absolute positioning forces you to correct it on the next element and it's very buggy.

I wish there was more I could for you. But you need to rebuild. This is beyond a simple fix of a margin or padding.

I hope this satisfies you and earns the credit for the answer.

Good luck. If you need further help as you build, check my website in my profile for my company and I can help you here and there.

Change them to:

<img src="http://vivacastenedolo.mrweb.info/content/img/home/quadratino_rect_empty.jpg" width="345px" height="170" alt="">

or better yet, remove the inline styles and add them to:

#container > div > a > img {
     width: 345px; 
     height: 170px;
}

and in the css replace the following

.item_text_rect div {
   position: absolute;
   bottom: -5px;
   line-height: 16px;
   color: white;
   width: 345px;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 5px;
   padding-bottom: 5px;
   overflow: hidden;
   height: 55px;
}

Upvotes: 1

Related Questions