CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mengchen Ding
Mengchen Ding

Reputation: 63

Three equal columns using bootstrap

I'm trying to get three equally sized columns with same margin and background color. But I get column 1 with no margin and background color, column 2 and 3 appear no problem. I'm finding this really frustrating so any help would be greatly appreciated! Here's my html:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
div1 {
    border: 1px solid grey;
    margin-top: 100px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 50px;
    background-color: lightgrey;
}
div2 {
    border: 1px solid grey;
    margin-top: 100px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 50px;
    background-color: lightgrey;
}
div3 {
    border: 1px solid grey;
    margin-top: 100px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 50px;
    background-color: lightgrey;
}

</style>
</head>
<body>

<div class="row">
  <div1 class="col-sm-4">Column 1</div1>
  <div2 class="col-sm-4">Column 2</div2>
  <div3 class="col-sm-4">Column 3</div3>
</div>

</body>
</html>

Here's the similar result i'm trying to get: pic

Here's the wrong one what I get: pic2

Upvotes: 1

Views: 3457

Answers (5)

DerJacques
DerJacques

Reputation: 332

You really shouldn't "invent" your own html tags like this. <div1> is not a valid HTML tag.

Also, since div1, div2, and div3 all are supposed to be styled the same way, you can simply create a class for them like this:

.column {
    border: 1px solid grey;
    margin-top: 100px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 50px;
    background-color: lightgrey;
}

Then, in your html, do this (combined with LordNeo's reply):

<div class="container">
    <div class="row">
      <div class="col-sm-4 column">Column 1 Div</div>
      <div class="col-sm-4 column">Column 2 Div</div>
      <div class="col-sm-4 column">Column 3 Div</div>
    </div>
</div>

Upvotes: 0

MergatroidSA
MergatroidSA

Reputation: 90

Have you tried Flexbox ? 

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    min-height: 800px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 400px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

Upvotes: 0

Lawrence Cherone
Lawrence Cherone

Reputation: 46610

As your using bootstrap you may as well use bootstrap, plus a little bit of css to pad the inner panels (to match your desired output). The HTML is all over the place (head code and div*'s).

So here is your code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .panel-pad-10 {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4 panel-pad-10">
                <div class="panel panel-default">
                  <div class="panel-body">Column 1</div>
                </div>
            </div>
            <div class="col-sm-4 panel-pad-10"> 
                <div class="panel panel-default">
                  <div class="panel-body">Column 2</div>
                </div>
            </div>
            <div class="col-sm-4 panel-pad-10">
                <div class="panel panel-default">
                  <div class="panel-body">Column 3</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362430

Just use Bootstrap. You don't want to override what Bootstrap provides.

<div class="row">
    <div class="col-sm-4">
        <div class="well">1
        </div>
    </div>
    <div class="col-sm-4">
        <div class="well">2
        </div>
    </div>
    <div class="col-sm-4">
        <div class="well">3
        </div>
    </div>
</div>

http://www.codeply.com/go/lUApj2LpiJ?q=

Upvotes: 0

LordNeo
LordNeo

Reputation: 1182

From: http://getbootstrap.com/css/#overview-container

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

So, wrap it up in a container like this:

<div class="container">
    <div class="row">
      <div1 class="col-sm-4">Column 1</div1>
      <div2 class="col-sm-4">Column 2</div2>
      <div3 class="col-sm-4">Column 3</div3>
    </div>
</div>

Or use "container-fluid" if you want full width

EDIT: As Lawrence pointed out, if you're going to use custom markup, you need to be sure that it has the display:block property set, otherwise it will not work

Upvotes: 0

Related Questions