# How to add margins and borders in Bootstrap?



## howard.a.s (Jul 22, 2005)

I have been looking at this example: https://www.w3schools.com/bootstrap/bootstrap_grid_stacked_to_horizontal.asp which describes how to create 2 columns of equal width which will stack when viewed on smaller screens. This is the kind of layout I'm looking for and would like to add a margin of perhaps 10px to the left, right, and to the center of each of the 2 colored columns, and perhaps a 1px border or outline around each column. Being new to Bootstrap I am struggling with how to do this. Please can anyone help?


----------



## JiminSA (Dec 15, 2011)

You can use a bit of inline styling within your img tags thus:

```
[IMG alt="an image"]images/anImage.jpg[/IMG]
```


----------



## JiminSA (Dec 15, 2011)

Woops! NOT img tags! I should have said div tags thus:

```

```
Well it is Monday


----------



## howard.a.s (Jul 22, 2005)

That simple  Well, as you say, it is Monday!

Thanks _once again_ Jim. You are without doubt a star


----------



## JiminSA (Dec 15, 2011)

You are welcome BroPerhaps you might consider changing margin to padding? (that ensures that your container retains it's maximum width - only 20px, but it's good practise ...)


----------



## howard.a.s (Jul 22, 2005)

Thanks again Jim, I shall try out what you suggest, but wouldn't using padding as opposed to margin add space to the inside of the border instead of the outside? Also, I was reading on the Stack Exchange web site that its okay to use borders largely forgotten 'cousin' outline to add a fine line around the edge of a container. What are your thoughts on this?


----------



## howard.a.s (Jul 22, 2005)

One more question. I have been attempting to set up this page so as to function with the cards generated by the embedly system we have previously been discussing in my other thread. The test page I have created at http://www.themetaldetective.co.uk/sandbox/bootstrap_columns.html ends up without a margin between the two columns no matter what I try, plus there is a vertical strip of white space to the right of each block of background color which should not be there at all. Any suggestions as to what I might do in order to correct these problems, apart from getting myself a more intelligent brain...


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> What are your thoughts on this?


I've never come across this before, but yeh, go fo it!


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> Any suggestions as to what I might do in order to correct these problems, apart from getting myself a more intelligent brain...


At his point in time I do not see the problem of there not being a margin between the 2 columns and I see no right-hand whitespace. Have you corrected whatever problem there was, in the interrim?


----------



## howard.a.s (Jul 22, 2005)

For the record, here's a bit more info about the outline property https://css-tricks.com/almanac/properties/o/outline/. With regards to your most recent reply, I haven't corrected the problem that I'm seeing and it wasn't until I tried viewing my page on other browsers that the penny dropped. You must be viewing my page using a browser other than Firefox? In Chrome, Opera and I.E my page performs properly. In Safari the social share bar that appears when you mouse-over the right-hand side of each column fails to appear, and in Firefox there is this problem I am seeing where the left and right columns appear to overlap, as if there is too much padding added to the right of each column. Also, when the social share bar appears the height of the column appears to increase, pushing the bottom border downwards. Any ideas as to how I can correct these issues?


----------



## dvk01 (Dec 14, 2002)

that is a browser interpretation not your coding
Works properly in IE & Chrome but no central margin and extra white space in in FF


----------



## JiminSA (Dec 15, 2011)

It may be advisable to *download the bootstrap package* and upload it to your site, rather than using links to CDN thus:

```

```
You should then adjust your links to css and js for bootstrap accordingly.
Why you may ask? I'm intuiting that FF is flagging the CDN's and disregarding them ...


----------



## howard.a.s (Jul 22, 2005)

Thank you both for your advice. I will do as you suggest by downloading bootstrap and adjusting the links before giving this another try. As for the 'Outline' property referred to in my earlier post, apparently this is okay to use where you want the border to appear around all sides of a given area, because unlike the border property you cannot apply top, right, bottom, and left borders independently.


----------



## howard.a.s (Jul 22, 2005)

Okay, so I've downloaded bootstrap and adjusted the links accordingly. I played around with my page for quite some time and while it performed properly in Firefox, it fell to pieces in I.E and Chrome. I then lost the embedly code just in case this was the cause, but still the same problem. I also tried using the following examples of code to achieve the desired results (https://stackoverflow.com/questions...y-side-center-to-the-page-using-bootstrap-css)


```
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>
```
and also


```
<div class ="container-fluid">
  <div class ="row">
    <div class ="col-md-6 col-sm-6">
        First Div
    </div>
    <div class ="col-md-6 col-sm-6">
        Second Div
     </div>
  </div>
</div>
```
This works in Firefox, but when viewed in Chrome or Safari, and instead of appearing side by side, the 2 columns appear directly underneath each other. In I.E, each column stretches across the entire width of the screen.

So, the simple question is, using Bootstrap how do I align two divs horizontally side-by-side, centered on the page, with a margin between each div of say 10px, which will be supported cross-browser?


----------



## howard.a.s (Jul 22, 2005)

Here's an example of the entire source code I've been playing around with, linked to the recently downloaded bootstrap and jquery.


```
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class ="container-fluid">
  <div class ="row">
    <div class ="col-md-6 col-sm-6">
        First Div
    </div>
    <div class ="col-md-6 col-sm-6">
        Second Div
     </div>
  </div>
</div> 
</body>
</html>
```


----------



## JiminSA (Dec 15, 2011)

If you put your columns in a full width div thus:

```
First Div

          Second Div
```


----------



## howard.a.s (Jul 22, 2005)

Further to my previous ramblings, I've been experimenting with this https://startbootstrap.com/template-overviews/2-col-portfolio/ which looks like it could form the basis of what I'm attempting to achieve. I've checked out the design direct using the live preview and it appears to render perfectly in Firefox, Chrome, and Opera. But again, when viewed using I.E 8, and Safari (for Windows) version 5.1.7, this layout also fails to render properly. Is this perhaps because I am running an older version of I.E and perhaps because Safari for Windows does not support Bootstrap, or is there another reason which can be fixed by means of a tweak to the source code. If so, any suggestions as to how?


----------



## JiminSA (Dec 15, 2011)

Did you try my 'enclose in full width' approach, Howard?


----------

