CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcentering
user1789997
user1789997

Reputation:

Bootstrap - can't center div

how can I center this please? As you can see, it's on the left side of the screen. I tried margin:0 auto; but it didn't help me.

URL: http://www.dev.dkenergy.sk/elektromontaze

What I want to center?

IMAGE

Thank you so much.

HTML:

<div class="container-fluid elektromontaze">
  <div class="row">
    <div class="col-md-12">
      <div class="container">
        <div class="col-md-4">
          <div class="well">
          </div>
        </div>
        <div class="col-md-8">
          <div class="row">
            <div class="col-md-12">
              <div class="elone">
                <h3 class="bold">silnoprúdové zariadenia</h3>
                <h4>Klasická inštalácia (domy, firmy) do 1000V vrátené bloskozvodov</h4>
                <div class="elektromontaze-separator"></div>
                <p>odborné poradenstvo ako aj samotná inštalácia kvalifikovanými odborníkmi vrátané kabeláže a dodanie materiálu.</p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="eltwo">
                <h3 class="bold">slaboprúdové zariadenia</h3>
                <div class="elektromontaze-separator"></div>
                <h4>Komunikačné a zabezpečovacie systémy (CCTV systém, alarmy)</h4>
                <p>odborné poradenstvo ako aj samotná inštalácia kvalifikovanými odborníkmi vrátané kabeláže a dodanie materiálu.</p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="elone">
                <h3 class="bold">opravy a údržby</h3>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="eltwo">
                <h3 class="bold">kompletné revízie</h3>
              </div>
            </div>
          </div>
        </div>
      </div>      
    </div>
  </div>
</div>

CSS:

.elektromontaze {
background:url("/images/bg-fotovoltaika.jpg");
background-size:100% auto;
background-repeat:no-repeat;
min-height:700px;
}

.elektromontaze-separator {
border-top:1px #353535 solid;
width:100%;
margin:0 auto 20px auto;
}

.elektromontaze h3 {
font-size:1.5em;
text-transform: uppercase;
}

.elektromontaze .col-md-4 {
margin:0;
padding:0;
width:159px;
}

.elektromontaze .col-md-8 {
margin:0;
padding:0;
}

.elektromontaze .well {
background-image: url("/images/bg-side.jpg");
background-repeat: no-repeat;
min-height: 600px;
width:159px;
padding: 19px;
margin-bottom: 20px;
border:none;
margin:0;
padding:0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.elone {
background:#f9cb42;
border-bottom: 3px #b39439 solid;
padding:20px 20px 20px 40px !important;
min-height:105px !important;
}

.eltwo {
background:#f2d170;
border-bottom: 3px #b39439 solid;
padding:20px 20px 20px 40px !important;
min-height:105px !important;
}

Upvotes: 1

Views: 877

Answers (4)

Kapil
Kapil

Reputation: 1141

Try to this solution please run in full screen

.elektromontaze {
background:url("/images/bg-fotovoltaika.jpg");
background-size:100% auto;
background-repeat:no-repeat;
min-height:700px;
}

.elektromontaze-separator {
border-top:1px #353535 solid;
width:100%;
margin:0 auto 20px auto;
}

.elektromontaze h3 {
font-size:1.5em;
text-transform: uppercase;
}

.elektromontaze .col-md-4 {
margin:0;
padding:0;
width:159px;
}

.elektromontaze .col-md-8 {
margin:0;
padding:0;
}

.elektromontaze .well {
background-image: url("/images/bg-side.jpg");
background-repeat: no-repeat;
min-height: 600px;
width:159px;
padding: 19px;
margin-bottom: 20px;
border:none;
margin:0;
padding:0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
position: absolute;
  right:0;
}

.elone {
background:#f9cb42;
border-bottom: 3px #b39439 solid;
padding:20px 20px 20px 40px !important;
min-height:105px !important;
}

.eltwo {
background:#f2d170;
border-bottom: 3px #b39439 solid;
padding:20px 20px 20px 40px !important;
min-height:105px !important;
}
<link href="http://www.dev.dkenergy.sk/assets/css/style.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container-fluid elektromontaze">
		<div class="row">
			<div class="col-md-12">
			<div class="container">
    		<div class="col-md-3">
        		<div class="well">
        		</div>
    		</div>
    	<div class="col-md-8">
        	<div class="row">
            	<div class="col-md-12">
                	<div class="elone">
                		<h3 class="bold">silnoprúdové zariadenia</h3>
                		<h4>Klasická inštalácia (domy, firmy) do 1000V vrátené bloskozvodov</h4>
						<div class="elektromontaze-separator"></div>
                		<p>odborné poradenstvo ako aj samotná inštalácia kvalifikovanými odborníkmi vrátané kabeláže a dodanie materiálu.</p>
                	</div>
            	</div>
        	</div>
        	<div class="row">
            	<div class="col-md-12">
                	<div class="eltwo">
                		<h3 class="bold">slaboprúdové zariadenia</h3>
						<div class="elektromontaze-separator"></div>
                		<h4>Komunikačné a zabezpečovacie systémy (CCTV systém, alarmy)</h4>
                		<p>odborné poradenstvo ako aj samotná inštalácia kvalifikovanými odborníkmi vrátané kabeláže a dodanie materiálu.</p>
                	</div>
            	</div>
        	</div>
        	<div class="row">
            	<div class="col-md-12">
                	<div class="elone">
                		<h3 class="bold">opravy a údržby</h3>
                	</div>
            	</div>
        	</div>
        
        	<div class="row">
            	<div class="col-md-12">
                	<div class="eltwo">
                		<h3 class="bold">kompletné revízie</h3>
                	</div>
            	</div>
        	</div>
    	</div>
		</div></div>
		</div>
</div>

Upvotes: 1

ketan
ketan

Reputation: 19341

Just add following css:

.container {
    display: flex;
    justify-content: center;
}

Upvotes: 4

Arkenia
Arkenia

Reputation: 71

I'm not sure if that is what you want, but maybe the answer is: - please remove from .elektromontaze .col-md-4 line: margin: 0 - add to col-md-4 class col-md-offset-1

Upvotes: 1

Alvian Casablancas
Alvian Casablancas

Reputation: 93

Try adding div tag with align center. Look at this:

<div align='center'>THE CODE</div>

Hope it helps!

Upvotes: 0

Related Questions