CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mark Golubev
Mark Golubev

Reputation: 49

Center div boxs

I'm trying to do main page for my website, I have picture how it should like this I've tried to use Bootstrap, but they all were stick to each other How should I solve this problem?

Here is my code for html:

<div class=" container-fluid">
    <div class="row" style="margin-top: 15%;">
        <div class="col-md-2 col-md-offset-5 text-center menu">About</div>

        <div class="row">
        <div class="col-md-2 col-md-offset-4 text-center menu ">Skills</div>
        <div class="col-md-2 text-center menu">Projects</div>
        </div>

        <div class="col-md-2 col-md-offset-5 text-center menu">Contact</div>

    </div>
</div>

And here is css:

.menu{
    font-family: 'Poiret One', cursive;
    font-size: 350%;
    color: white;
    background-color:grey;
    border: 1px solid black;
    opacity: 0.95;
    transition-property: all;
    transition-duration: 0.5s;
}

Upvotes: 0

Views: 69

Answers (4)

amachree tamunoemi
amachree tamunoemi

Reputation: 825

I use div and span tags together with css properties such as block, cross-browser inline-block and text-align center, see my simple example here below but solution is obtained from Here

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <style>
           .block{display:block;}
           .text-center{text-align:center;}
           .border-dashed-black{border:1px dashed black;}
           .inline-block{
                 display: -moz-inline-stack;
                 display: inline-block;
                 zoom: 1;
                 *display: inline;
            }
           .border-solid-black{border:1px solid black;}
           .text-left{text-align:left;}
        </style>
    </head>
    <body>
          <div class="block text-center border-dashed-black">
              <span class="block text-center">
                  <span class="block"> 
        <!-- The Div we want to center set any width as long as it is not more than the container-->
                      <div class="inline-block text-left border-solid-black" style="width:450px !important;">
                             jjjjjk
                      </div> 
                  </span>
              </span>
          </div>
      </body>
   </html>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

You didn't close every row, which is necessary for the bootstrap grid to work the way you want it.

I suppose it depends on the bootstrap version, but at least in codepen the offset classes have to be named differently: offset-md-5 instead of col-md-offset-5 and similar. There seems to be a bug or some inconsistency in the some bootstrap version/s - see also this question: Bootstrap 4 accepting offset-md-*, instead col-offset-md-* Naming Convention Bug

Here's the working code for your situation in a codepen: https://codepen.io/anon/pen/NjxLdj

EDIT / CODE FROM CODEPEN ADDED HERE (but without Bootstrap CSS, i.e. not working without it):

<div class="container-fluid">
  <div class="row" style="margin-top:15%;">
    <div class="col-md-2 offset-md-5 text-center menu">About</div>
  </div>
  <div class="row">
    <div class="col-md-2 offset-md-4 text-center menu">Skills</div>
    <div class="col-md-2 text-center menu">Projects</div>
  </div>
  <div class="row">
    <div class="col-md-2 offset-md-5 text-center menu">Contact</div>
  </div>
</div>

Upvotes: 0

Josh
Josh

Reputation: 66

It's be helpful if you provided some code but to get it just like that image, I have provided the code below - adjustments could be made from there:

        #topdiv{
            width:400px;
            height:40px;
            margin:0 auto;
            border: 2px solid black;
        }
        #leftdiv{
            float:left;
            width:30%;
            margin-left: 17%;
            border: 2px solid black;
        }
        #rightdiv{
            float:right;
            width:30%;
            margin-right: 17%;
            border: 2px solid black;
        }
        #bottomdiv{
            clear: both;
            position: relative;
            width:400px;
            height: 50px;
            bottom:0;
            margin: 0 auto;
            border: 2px solid black;
        }

Then the HTML:

    <!DOCTYPE html>
    <html>
     <head>
        <link rel = "stylesheet" type = "text/css" href = "CSSFILE.css" />
     </head>
     <body>
      <div id = "topdiv">
         Top
      </div>
      <div id = "leftdiv">
         Left
      </div>
      <div id = "rightdiv">
         Right
      </div>
      <div id = "bottomdiv">
         Bottom
      </div>
     </body>
    </html>

Upvotes: 1

Badacadabra
Badacadabra

Reputation: 8497

Here is a simple example with Flexbox:

.content {
  width: 250px;
  padding: 20px;
  margin: 10px;
  border: solid 10px black;
  text-align: center;
  font-size: xx-large;
}

#wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#middle {
  display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox</title>
</head>
<body>
  <div id="wrapper">
    <div class="content">text</div>
    <div id="middle">
      <div class="content">text</div>
      <div class="content">text</div>
    </div>
    <div class="content">text</div>
  </div>
</body>
</html>

Upvotes: 1

Related Questions