I've taken a break from HTML & css and now i'm trying to do my new website using bootstrap framework.
I need my logo to sit left on desktop devices but then centered along with the text on the right as well for mobile... I'm having so much trouble trying to figure this out. could someone please help! thanks!
<div class="container">
<header id="headertop">
<div class="row">
<div class="col-lg-9 col-md-9 col-xs-12">
<div class="logo-top">
<img class="img-responsive" src="images/ejc-logo.png"/>
</div> <!-- // end .logo-top -->
</div> <!-- // end .col LOGO -->
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="contact-info-top">
<span class="contact-phone hidden-sm hidden-xs"> 973.452.9716 </span> <br>
<span class="contact-email hidden-sm hidden-xs"> support#ejuicecrafters.com </span>
<div class="contact-info-top-mobile text-center">
<h5 class="contact-phone-mobile hidden-md hidden-lg hidden-xl"> 973.452.9716 </span> <br>
<h5 class="contact-email-mobile hidden-md hidden-lg hidden-xl"> support#ejuicecrafters.com </span>
</div>
</div>
</div>
CSS File:
#media (max-width: 768px) {
.img-responsive {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
}
Demo: http://www.bootply.com/YL64euYYAZ
I have simplified your code. Please check the result. What do you need to improve?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (max-width: 767px) {
.logo-top img {
margin: 0 auto;
}
.contact-info-top .contact-phone,
.contact-info-top .contact-email {
text-align: center;
}
}
#media (min-width: 768px) {
.contact-info-top {
/* add what you need */
}
.contact-info-top .contact-phone {
/* add what you need */
}
.contact-info-top .contact-email {
/* add what you need */
}
}
<div class="container">
<header id="headertop">
<div class="row">
<div class="col-xs-12 col-sm-9 logo-top">
<img class="img-responsive" src="http://placehold.it/50x50/c69/fff/?text=logo" />
</div>
<div class="col-xs-12 col-sm-3 contact-info-top">
<div class="contact-phone"> 973.452.9716 </div>
<div class="contact-email"> support#ejuicecrafters.com </div>
</div>
</div>
</header>
</div>
This will work....
<div class="container">
<header id="headertop">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12">
<div class="logo-top">
<img class="img-responsive" src="images/ejc-logo.png"/>
</div> <!-- // end .logo-top -->
</div> <!-- // end .col LOGO -->
<div class="col-lg-3 col-md-3 col-sm-12">
<div class="contact-info-top">
<span class="contact-phone hidden-sm hidden-xs"> 973.452.9716 </span> <br>
<span class="contact-email hidden-sm hidden-xs"> support#ejuicecrafters.com </span>
<div class="contact-info-top-mobile text-center">
<h5 class="contact-phone-mobile hidden-md hidden-lg hidden-xl"> 973.452.9716 </span> <br>
<h5 class="contact-email-mobile hidden-md hidden-lg hidden-xl"> support#ejuicecrafters.com </span>
</div>
</div>
</div>
Related
After reading some threads, I managed to use the 'flex' class to remove the random blank spaces. But I've tried everything and now I am tired of this. I cannot get rid of these random spaces. Can anyone please point out what's going wrong in this?
.jumbotron {
margin-top: 80px;
padding-left: 40px;
background: #0d2d60;
color: white;
}
.image {
width: 100%;
height: 250px;
background-size: cover;
background-position: center;
}
.image1 {
background-image: url("https://source.unsplash.com/MYlvxeye9J0");
}
.image2 {
background-image: url("https://source.unsplash.com/KxCq-xveKcU");
}
.image3 {
background-image: url("https://source.unsplash.com/CKQG961UaWo");
}
.image4 {
background-image: url("https://source.unsplash.com/yySQipYW6Y4");
}
.image5 {
background-image: url("https://source.unsplash.com/ZtTkB3LmlNw");
}
.image6 {
background-image: url("https://source.unsplash.com/NdBsn0WQadw");
}
.image7 {
background-image: url("https://source.unsplash.com/lIa03ti94ec");
}
.image8 {
background-image: url("https://source.unsplash.com/k5wF1D_1rjo");
}
.image9 {
background-image: url("https://source.unsplash.com/Jd8hr75moLc");
}
body {
background: #081935;
}
.navbar {
background: #0d2d60;
color: white;
border-bottom: 0;
}
.flex {
display: flex;
flex-wrap: wrap;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#"><span aria-hidden="true" class="glyphicon glyphicon-camera"></span> IMGS</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Sign Up
</li>
<li>
Login
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron container">
<h1><span class="glyphicon glyphicon-camera"></span> The Image Gallery</h1>
<p>A bunch of beautiful images that I didn't take</p>
</div>
<div class="container">
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image1"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image2"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image3"></div>
</div>
</div>
</div>
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image4"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image5"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image6"></div>
</div>
</div>
</div>
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image7"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image8"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image9"></div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
Random Space between the Images
On screen size sm and x-sm
Works perfectly If the sceen size is large
I see a couple of problems:
1) Unrelated, loading jquery twice
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
[...]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
2) There is a problem in the code for small size (sm):
There are 3 divs with col-sm-6 and the sum of them should be 12 but 3x6 = 18, that's why third image gets on its own line.
3) For resolutions less than 768px wide or so, the col-md-* gets applied, i think you need xs cols if you need specific for this case.
More info in the docs: Boostrap 3 - Grid
I placed your code in jsfiddle using a bootstrap boiler plate and I'm assuming that you're wanting to remove the padding between the images?
By default Boostrap's .col- classes have padding-left and padding-right styles.
If you add this to your CSS it will remove the padding:
.col-lg-4, .col-md-4, .col-sm-6 {
padding: 0px;
}
However, this will change column padding sitewide. It is not recommended that you set global styles for columns. My recommendation would be to create a CSS class like "img-no-padding" and add that class to those columns.
Here is a jsfiddle demonstrating this.
Ok guys, I found an exact solution for this problem after some more research. #emsimpson It was not about the padding or margin. The problem was with the bootsrap 12 container grid.
As mentioned by #August : There is a problem in the code for small size (sm): There are 3 divs with col-sm-6 and the sum of them should be 12 but 3x6 = 18, that's why third image gets on its own line.
But I found a solution for that too. Flex deals with this problem.
.flex
{
display: flex;
flex-wrap: wrap;
}
As you can see, I have used the flex class but it didn't work. So I nested all of my columns under one single row with class flex and it tackled the problem. Bootstrap will know when to move the columns to the next row based on accumulated size.
<div class="container">
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image1"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image2"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image3"></div>
</div>
</div>
<!-- </div> -->
<!-- <div class="row flex"> -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image4"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image5"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image6"></div>
</div>
</div>
<!-- </div> -->
<!-- <div class="row flex"> -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image7"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image8"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image9"></div>
</div>
</div>
<!-- </div> -->
</div>
</div>
The following code using flexbox/centre bootstrap media card works correctly, apart from when viewed on a mobile sized screen, where the boxes are aligned to the left. I'd like them centred in the screen.
I looked at changing align-self-left to centre or text-align: center but it does not appear to work. I tried applying this to the article and row below. Not sure why it will not centre correctly?
CSS
.card .card-body {
padding: 15px;
text-align: center;
}
.boxFixDw {
display:inline-block; width: 285px;
color: #1576b9;
}
HTML
<div class="row flexbox-wrap">
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body align-self-left">
<h4 class="list-group-item-headline boxFixDw">LATEST RESOURCES</h4>
<p class="list-group-item-text">More added each week.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">JOIN NOW</h4>
<p class="list-group-item-text">For instant access.</p>
SIGN UP
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">SAMPLE RESOURCES</h4>
<p class="list-group-item-text">Check the quality.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
</div>
apart from when viewed on a mobile sized screen, where the boxes are
aligned to the left.
To center the cards on mobile you need to change align-items: flex-start; to align-items: center; for the .media through media query
#media only screen and (max-width: 767px) {
.media {
align-items: center !important;
}
}
.card .card-body {
padding: 15px;
text-align: center;
}
.boxFixDw {
display:inline-block; width: 285px;
color: #1576b9;
}
#media only screen and (max-width: 990px) {
.media {
align-items: center !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row flexbox-wrap">
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body align-self-left">
<h4 class="list-group-item-headline boxFixDw">LATEST RESOURCES</h4>
<p class="list-group-item-text">More added each week.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">JOIN NOW</h4>
<p class="list-group-item-text">For instant access.</p>
SIGN UP
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">SAMPLE RESOURCES</h4>
<p class="list-group-item-text">Check the quality.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
</div>
</div>
So I have a layout that I want to make responsive in bootstrap according to the device. What I want to know is how I can execute it in a way that is shown in the image. I have tried using table cells and bootstrap column/rows but to no avail.
I want the elements above availability and Link 1 to fall to the left of the words. How can I do this?
Here is my HTML and CSS:
<div class="col-md-12" style="border:black solid 1px;">
<div class="row vertical-align">
<div class="col-sm-2">
<div class="row">
<div style="padding:5px;" class="col-xs-4">
<input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox" />
</div>
<div class="col-xs-8">
<img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Name：</strong>Bob</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Agency：</strong>AFDM</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Stack：</strong>ADCM</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Grade：</strong>C</div>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<div class="led-red-trans"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Available</strong>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Link</strong>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-xs-12">
<a data-toggle="collapse" href="#collapseme"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>More</strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="collapseme" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.vertical-align {
display: flex;
align-items: center;
}
.led-red-trans {
margin: 0 auto;
width: 24px;
height: 24px;
background-color: #F00;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}
/* Large Devices, Wide Screens */
#media (min-width : 1200px) {
.vertical-align {
display: flex;
align-items: center;
}
}
/* Medium Devices, Desktops */
#media (min-width : 992px) and (max-width : 1199px) {
.vertical-align {
display: flex;
align-items: center;
}
}
/* Small Devices, Tablets */
#media (max-width : 768px) and (max-width : 991px) {
.vertical-align {
display: flex;
align-items: center;
}
}
/* Extra Small Devices, Phones */
#media (max-width : 767px) {
.vertical-align {
display: block;
align-items: center;
}
}
/* Custom, iPhone Retina */
#media (max-width : 480px) {
.vertical-align {
display: block;
align-items: center;
}
}
And a CODEPEN:
http://codepen.io/nilerafter24/pen/VPYpqq
this will help you some how with pure bootstrap classes.
<div class="col-md-12" style="border:black solid 1px;">
<div class="row vertical-align">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div style="padding:5px;" class="col-xs-4">
<input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox" />
</div>
<div class="col-xs-8">
<img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg" />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-xs-12 col-lg-6">
<div><strong>Name：</strong>Bob</div>
</div>
<div class="col-xs-12 col-lg-6" >
<div><strong>Stack：</strong>ADCM</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-6">
<div><strong>Agency：</strong>AFDM</div>
</div>
<div class="col-xs-12 col-lg-6">
<div><strong>Grade：</strong>C</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
</div>
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<span class="glyphicon glyphicon-lamp" aria-hidden="true"></span>
</div>
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<strong>Available</strong>
</div>
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<strong>Link</strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="collapseme" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>
This is the theory behind how I would do your code:
Surround each of the sections in a div and float:left them or display: inline-block them.
Use media tags to add float: none or display: block when the times comes.
Note Do not use table for responsive design, it's the worst to deal with.
Rough Example:
.first,
.second,
.third {
width: 33%;
padding: 1%;
display: inline-block;
}
img {
max-width: 100%;
}
.vertical-align {
display: flex;
align-items: center;
}
.led-red-trans {
margin: 0 auto;
width: 24px;
height: 24px;
background-color: #F00;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}
/* Large Devices, Wide Screens */
#media (min-width: 1200px) {
}
/* Medium Devices, Desktops */
#media (min-width: 992px) and (max-width: 1199px) {
}
/* Small Devices, Tablets */
#media (max-width: 768px) and (max-width: 991px) {
}
/* Extra Small Devices, Phones */
#media (max-width: 767px) {
}
/* Custom, iPhone Retina */
#media (max-width: 480px) {
.vertical-align {
display: block;
align-items: center;
}
.first,
.second,
.third {
width: 100%;
}
}
<div class="col-md-12" style="border:black solid 1px;">
<div class="row vertical-align">
<div class="col-sm-2 first">
<div class="row">
<div style="padding:5px;" class="col-xs-4">
<input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox">
</div>
<div class="col-xs-8">
<img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg">
</div>
</div>
</div>
<div class="second">
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Name：</strong>Bob</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Agency：</strong>AFDM</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Stack：</strong>ADCM</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Grade：</strong>C</div>
</div>
</div>
</div>
</div>
<div class="third">
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<div class="led-red-trans"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Available</strong>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Link</strong>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-xs-12">
<a data-toggle="collapse" href="#collapseme"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>More</strong>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="collapseme" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>
My suggestion would be to break it into 3 columns. And then split those columns into sub columns. Like so..
large screen
l4 l4 l4
| | l6 | l6 | l6 l6 |
| Image | |Name, Agency| |Stack, Group| | |Availability| |Link 1| |
medium screen
m4 m4 m4
| | m12 | m12
| | |Name, Agency| | |Availability|
| | m12 | m12
| | |Stack, Group| | |Link 1|
small screen everything will be sm-12
a simple implementation - codepen
I have a problem with a landingpage that I am building. When the page hits the breakpoint: 991px, the book picture is dipasering under the banner.
Is there someone who can help me solve this, and see through the developer tools if it is something to do with the CSS?
Link to page.
The Html I have is here:
<div class="background-image" #Html.Raw(topImageStyling)>
<div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 img logo img-responsive">
</div>
</div>
</div>
<div class="book container col-sm-12 hidden-sm hidden-xs col-md-3 col-lg-4">
<img src="
</div>
<div class="container col-sm-12 col-md-9 col-lg-8">
#if (!string.IsNullOrEmpty(headerText))
{
if (pageAlias == "Blog")
{
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
}
else
{
<p class="header-xl center">
#Html.Raw(headerText)
</p>
}
}
#if (CurrentPage.HasValue("imageTeaserText"))
{
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
}
</div>
<div class="col-sm-12 visible-sm visible-xs">
<img src="
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 main-content" id="main-content">
<div class="row">
<div class="col-lg-12">
#CurrentPage.GetGridHtml("inovoGrid")
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In landingpage.css line number 804 position: relative; invisible it.
Solve if we put another class in
<div class="col-sm-12 visible-sm visible-xs new-class"> .... </div>
.new-class {
position:inherit !important
}
Hope it will help you.
HTML CODE:
<div class="container-fluid">
<header class="header-area row">
<div class="container-fluid">
<div class="logo-area row">
<div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
<img class="img-responsive" src="images/logo.png" alt="V" />
</div>
</div>
</div>
<div class="container-fluid">
<div class="heading row">
<div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
<h1>I love design </h1>
</div>
</div>
</div>
</header>
</div>
CSS CODE:
.header-area .logo-area img {
width: 90px;
height: auto;
margin: 52px 0 120px;
}
.img-responsive {
margin: 0 auto;
}
I tried in many ways but i failed.The solution should be done using bootstrap.Please help me.
here is a solution, just add css display:inline-block and put all your tag between this html thg <center > </center>
here is modified code
.inline{
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.header-area .logo-area img {
width: 90px;
height: auto;
margin: 52px 0 120px;
}
.img-responsive {
margin: 0 auto;
}
<center>
<div class="container-fluid">
<header class="header-area row">
<div class="container-fluid inline">
<div class="logo-area row">
<div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
<img class="img-responsive" src="images/logo.png" alt="V" />
</div>
</div>
</div>
<div class="container-fluid inline">
<div class="heading row">
<div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
<h1>I love design </h1>
</div>
</div>
</div>
</header>
</div>
</center>`
good luck..
try adding 1 more class text-center to conrainer-fluid and remove any margins you applied in your css
<div class="container-fluid text-center">
<header class="header-area row">
<div class="container-fluid">
<div class="logo-area row">
<div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
<img class="img-responsive" src="images/logo.png" alt="V" />
</div>
</div>
</div>
<div class="container-fluid text-center">
<div class="heading row">
<div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
<h1>I love design </h1>
</div>
</div>
</div>
</header>
</div>
Add this style in you CSS file:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
And also add apply this class on your image:
<img class="img-responsive" src="images/logo.png" class=".center-block" alt="V" />
Demo