I can't seem to find the way to center a container that has a couple of images and a label. Here is the code:
<div class="container">
<div class="row">
<div class="col-sm-1" style="width:88px;padding-left:0px">
<img id="Img1" runat="server" src="images/image1.gif" />
</div>
<div class="col-sm-8" style="height:60px">
<div class="row">
<div class="col-sm-12 BaseColor1" style="text-align:center">
<img id="Img2" runat="server" src="images/image2.gif" />
</div>
</div>
<div class="row" style="background-color:white;color: black;text-align:center">
<div class="col-sm-12" style="vertical-align:central">
<asp:Label Runat="server" Height="26px" ID="lblComp">COMPANY</asp:Label>
</div>
</div>
</div>
</div>
</div>
How do I make the entire container div or the "row" div (below) to center in the browser?
Try adding "margin:0 auto"
<div class="container" style="margin:0 auto">
<div class="row">
<div class="col-sm-1" style="width:88px;padding-left:0px">
<img id="Img1" runat="server" src="images/image1.gif" />
</div>
<div class="col-sm-8" style="height:60px">
<div class="row">
<div class="col-sm-12 BaseColor1" style="text-align:center">
<img id="Img2" runat="server" src="images/image2.gif" />
</div>
</div>
<div class="row" style="background-color:white;color: black;text-align:center">
<div class="col-sm-12" style="vertical-align:central">
<asp:Label Runat="server" Height="26px" ID="lblComp">COMPANY</asp:Label>
</div>
</div>
</div>
</div>
</div>
You can also see this post about using Bootstrap's "offsets"
Related
i have made the website mobile responsive.All are done.
This is the website which i made responsive.
alpha.dubaiexporters.com
what is happening is that when its of desktop size,the footer links are clickable but when i resize it to small screen,footer links shows unclickable.
i used the inspect element to know the issue and i found that its because of <div class="clearfix"> . So i removed it from my coding but the problem still persists.I dont have any idea.Even i tried removing .clearfix before and after from bootstrap.cs but its not working.[
i dont know why clearfix div is displaying even after removing it from code.
code:
<div class="footer-wrapper">
<div class="footer-container vc_row wpb_row vc_row-fluid ">
<%-- <img src="//cohhe.com/demo/sky/sky-directory/wp-content/uploads/2015/01/skydirectory-footer-logo.png" class="footer-logo " alt="Sky Directory" />--%>
<div class="footer-content" style="padding-top:60px;">
<div class="footer-links-container columns_count_2">
<div id="first" class="widget-area footer-links vc_col-sm-6 " role="complementary">
<div id="sky-directory-useful-links-20" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
About DubaiExporters
</div>About Us<br />Member Benefits<br />Link Us<br />Media Partners<br />Contact Us<br /><%--<div class="clearfix"></div>--%></div><div id="sky-directory-useful-links-21" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
Information
</div>News<br />Upcoming Exhibitions<br />Advertise<br />Add Your Event<br /><br /><%--<div class="clearfix"></div>--%></div> </div>
<div id="second" class="widget-area footer-links vc_col-sm-6 last" role="complementary">
<div id="sky-directory-contact-us-11" class=" sky-contactus widget widget_sky-directory-contact-us row-fluid">
<div class="contact-us-widget-main">
<div class="contact-us-phone">
<span class="phone-icon fa fa-mobile"></span>
<div class="phone-info-container">
<span class="phone-text">Call us:</span>
<span class="phone-number">+971 4 3050755</span>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-lower">
<div class="contact-us-social">
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-email">
<a href="mailto:info#skydirectory.com" class="email-address">
<span class="email-text">Or send an email to:</span>info#dubaiexporters.com</a>
</div>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<%-- <div class="clearfix"></div>--%>
</div> </div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<%--<div class="scroll-to-top-container">
<div class="scroll-to-top"><span>To Top</span></div>
</div>--%>
<div class="footer-inner">
<div class="footer_info">
<div class="copyright">© 2018, Dubai Exporters</div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<div class="footer-cloud-container">
<%--<img src="http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/bottom-cloud.png" width="266" height="116" alt="Footer cloud"/>--%>
<%-- <div class="clearfix"></div>--%>
</div>
</div>
</div>
I am getting so much space between the text. I am using form-group. I don't know why. I am new to Bootstrap.
Code:
<div class="wrapper">
<asp:Panel ID="Panel1" runat="server">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div align="left" style="padding-bottom:10px;margin-left:50px;"><b>Exhibitors Passport</b> </div>
</div>
<div class="col-md-6"></div>
<div class="clearfix"></div>
</div>
</div>
<div class="container-fluid">
<section class="container">
<div class="row-fluid">
<div class="form-group col-md-12">
<div class="col-md-6">
<h3 style="color:#fc2630;font-size:14px;padding-bottom:15px;">
Please Submit Exhibitor Passport Details :</h3>
</div>
</div>
</div>
<div class="row-fluid">
<div class="form-group col-md-12">
<div class="col-md-6" style="color:#5a5b5b;font-size:14px;font-weight:bold;">
Delegate Details - 1:
<asp:CheckBox ID="chk1_" runat="server" Checked="True" Visible="False" />
</div>
<div class="col-md-6"></div>
</div>
</div>
</section>
</div>
</asp:Panel>
</div>
I think it's not because of Bootstrap. You have some padding in your style attributes.
http://codepen.io/anon/pen/bMbEbO
I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?
Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}
Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>
I have 3 images within a row. Between each column, i'd like to add an arrow pointing to the next image.
How can I do this, while keep the existing images centered (so the middle one is in the middle of the page), and so it degrades nicely on smaller screens (disappears for instance)?
html:
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="col-sm-12" style="text-align: center;">EASY TO USE</h1>
<hr>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step1htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets/img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step2htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets//img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step3htc.mini.24.png" height="350px" width="240px" alt="">
</div>
</div>
</div>
</body>
</html>
EDIT: For clarification, I want to add arrows between the existing images in the html code above. The html/css above is already centered. Howver, i'd like to add 2 arrows between the 3 existing images.
EDIT: Please see this image to understand what I mean: http://imgur.com/YT2hnw4
EDIT: Changed html to show a full example, including css call.
Here you go
<div class="container">
<div class="row">
<h1 class="centered" style="text-align: center;">EASY TO USE</h1>
<hr>
<div class="col-md-3" style="margin-left:4.17%;">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets/img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets//img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
</div>
</div>
All i did is removed the extra col-md-1 class and instead added the margin of the same equivalance to the 1st element so that it stay in the center.
<asp:Literal ID="literal" runat="server" >
</asp:Literal>
i using string have value below
<div class="TopNewsTab">
<div class="news-category">
<div class="c1">
<div class="c11">
</div>
<div class="c12" />
<div class="c13" />
</div>
<div class="news-content">
</div>
</div>
<div class="news-category">
<div class="c1">
<div class="c11">
</div>
<div class="c12" />
<div class="c13" />
</div>
<div class="news-content">
</div>
</div>
</div>
after i using literal.Text= valueover;
when display on page i used firebug see content become
<div class="TopNewsTab">
<div class="news-category">
<div class="c1">
<div class="c11">
</div>
<div class="c12" />
**<div class="news-category">
<div class="c1">
<div class="c11">
</div>
<div class="c12" />
<div class="c13" />
</div>**
<div class="news-content">
</div>
</div>
<div class="c13" />
</div>
<div class="news-content">
</div>
</div>
</div>
position of <div class="news-category"> change position before assign literal please help me the problem ??
Don't self close your <div/> tags. I know it seems like it should technically be valid in XHTML, but it causes problems.
So just change
<div class="c12" />
<div class="c13" />
to
<div class="c12" ></div>
<div class="c13" ></div>