I'm using bootstrap v.3 and I'm trying to get the item in the same line using form-horizontal class, however I'm not able to get this work, see the code below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid one-half">
<div class="form-horizontal">
<div class="form-group">
<img id="footer-logo" src="#" alt="">
<div id="copyright">
<p>All Rights Reserved.</p>
</div><!--/#copyright-->
<div id="credit">
<p>Powered by WordPress.</p>
</div><!--/#credit-->
</div>
</div>
</div>
what am I doing wrong? Thanks.
.form-group{
display: inline-flex;
}
Is this what you are looking for?
<form class="form-inline">
<div class="form-group">
<img id="footer-logo" src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business.jpg" alt="">
</div>
<div class="form-group">
<div id="copyright">
<p>All Rights Reserved.</p>
</div><!--/#copyright-->
</div>
<div class="form-group">
<div id="credit">
<p>Powered by WordPress.</p>
</div><!--/#credit-->
</div>
</form>
Ref:Forms Bootstrap
Use style="display:inline-block;"
<div class="grid one-half">
<div class="form-horizontal">
<div class="form-group" >
<img id="footer-logo" src="#" alt="" style="display:inline-block;">
<div id="copyright" style="display:inline-block;">
<p>All Rights Reserved.</p>
</div><!--/#copyright-->
<div id="credit" style="display:inline-block;">
<p>Powered by WordPress.</p>
</div><!--/#credit-->
</div>
</div>
</div>
Related
I am new to bootstrap and trying to complete my website which include a section something like this . Please help me to achieve this.
here is my code (if that helps)
<div class="row mfoo">
<div class="col-5 illus col-xs-12">
<img src="./images/illustration-features.svg" />
</div>
<div class="col-md-7 col-xs-12 text-right">
<div class="row">
<div class="col-7 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
<br />
<div class="row">
<div class="col-7 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
</div>
</div>
You use col-xs-* but xs size does not exsit in bootstrap-4
So use only col-md-5/7
See working code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row mfoo">
<div class="col-md-5 illus">
<img src="./images/illustration-features.svg" />
</div>
<div class="col-md-7">
<div class="row">
<div class="col-7 col-sm-12">
<p class="features_title"> dsf</p>
<p class="features_desc"> df</p>
</div>
<div class="col-5 col-sm-12">
<p class="features_title"> df</p>
<p class="features_desc"> df</p>
</div>
</div>
<br />
<div class="row">
<div class="col-7 col-sm-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-sm-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
</div>
</div>
</div>
to create your desired layout,
I've reproduce your code here with the solution
<div class="row mfoo">
<div class="col-lg-5 col-sm-12 illus col-xs-12">
<img src="https://cdn.pixabay.com/photo/2018/11/29/21/19/hamburg-3846525_1280.jpg" />
</div>
You can see complete code here: https://jsfiddle.net/wlum/kva1g5mp/7/
I have changed the col-5 into col-lg-5, so when small screen it will call the col-xs-12.
Bootstrap Grid System
In Bootstrap 4, There are two classes that are used for defining mobile devices. For smaller devices they use.col-sm- and for extra smaller devices they use .col-.
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 trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
Good evening, i have one question, how can i hide this logo enter image description here
in my website with a custom css?
this is my code, i think the class of my logo is sticky-logo, itried so much but i can't hide it. please help me.
<body class="page-template page-template-page-templates page-template-landing-page page-template-page-templateslanding-page-php page page-id-10270 logged-in siteorigin-panels" id="thim-body">
<div id="wrapper-container" class="wrapper-container">
<div class="content-pusher " style="padding-top: 149px;">
<header id="masthead" class="site-header affix-top sticky-header header_default header_v1">
<div id="toolbar" class="toolbar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<aside id="text-2" class="widget widget_text">
<div class="textwidget">
<div class="thim-have-any-question"> Hai delle domande?
<div class="mobile"><i class="fa fa-phone"></i><span class="value">045 581062</span></div>
<div class="email"><i class="fa fa-envelope"></i>segreteria#corsiverona.it</div>
</div>
</div>
</aside>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="navigation col-sm-12">
<div class="tm-table">
<div class="width-logo table-cell sm-logo">
<img src="https://www.corsiverona.it/wp-content/uploads/2016/05/Corsi-verona_logoArancio-Nero2.jpg" alt="CorsiVerona" width="300" height="59">
<a href="https://www.corsiverona.it/" title="CorsiVerona - Un nuovo sito professionale marcato Corsi Verona"
rel="home" class="sticky-logo"> <img src="https://www.corsiverona.it/wp-content/uploads/2016/05/Corsi-verona_logoArancio-Nero2.jpg" alt="CorsiVerona" width="300" height="59">
It looks like you can hide your logo like this:
.sm-logo {
display: none;
}
Try the snippet below:
.sm-logo {
display: none;
}
<body class="page-template page-template-page-templates page-template-landing-page page-template-page-templateslanding-page-php page page-id-10270 logged-in siteorigin-panels" id="thim-body">
<div id="wrapper-container" class="wrapper-container">
<div class="content-pusher " style="padding-top: 149px;">
<header id="masthead" class="site-header affix-top sticky-header header_default header_v1">
<div id="toolbar" class="toolbar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<aside id="text-2" class="widget widget_text">
<div class="textwidget">
<div class="thim-have-any-question"> Hai delle domande?
<div class="mobile"><i class="fa fa-phone"></i><span class="value">045 581062</span></div>
<div class="email"><i class="fa fa-envelope"></i>segreteria#corsiverona.it</div>
</div>
</div>
</aside>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="navigation col-sm-12">
<div class="tm-table">
<div class="width-logo table-cell sm-logo">
<img src="https://www.corsiverona.it/wp-content/uploads/2016/05/Corsi-verona_logoArancio-Nero2.jpg" alt="CorsiVerona" width="300" height="59">
<img src="https://www.corsiverona.it/wp-content/uploads/2016/05/Corsi-verona_logoArancio-Nero2.jpg" alt="CorsiVerona" width="300" height="59">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.
Simple
<div class="row">
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
</div>
</div>
</div>
PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.
This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.
.row.shift-left {
margin-left: -20px;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row shift-left">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-9">Words words words.</div>
<div class="col-xs-3">
<img src="http://placehold.it/300x800" class="img-responsive" />
</div>
</div>
</div>
...
Demo