I installed a bootstrap theme for Wordpress but I'm experiencing an issue with grid alignment.
See: Click Here in Products&Services.
'Seed' should be on the left and 'Other Products' on the right aligned with the second element 'LeafLine'.
What could that be?
You can also just add a clearfix element after the leafline div to fix this layout.
<div class="clearfix"></div>
More information can be found here: http://getbootstrap.com/css/#grid-responsive-resets
This is an easy fix. You just need to put the content into either two rows, or two columns. Because there is more text on the first left-side block, the Seed block is getting pushed out. You will just need to increase padding below the rows.
Example with rows: http://www.bootply.com/PjWnLEAOMT
<div class="row">
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Primo</h3>
This is Leaf Space main project. A super lightweight two-stage launch vehicle able to bring up to 50 kg to Low Earth Orbit. The use of composite materials and hybrid proprulsive technology make Primo extremely safe, reliable and enviromental friendly, ensuring precise orbit inserction and extremely low risk of failure. All the components are designed with reusability in mind for future implementation of a reusable launch vehicle. </div>
</div>
</div>
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">LeafLine</h3>
A ground stations network exclusively dedicated to nano, micro and smallsats is under development. LeafLine can support several orbits and different transmission protocols. A direct encrypted online link ensures simple and safe data collection and control transmissions to satellite operators. </div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Seed</h3>
Thanks to its great versatility and reliability, hybrid propulsion can be used for several applications. Leaf Space is developing Seed, a next generation hybrid rocket motor designed for in space applications such as:
<ul>
<li>orbital maneuvers</li>
<li>re-orbiting</li>
<li>de-orbiting</li>
</ul>
The first design is dedicated to nano and microsats, other future improved versions will serve also heavier satellites. </div>
</div>
</div>
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Other Services</h3>
Other Services
To complete the offer of Leaf Space, a series of services dedicated to nano and microsatellites will be available, also in collaboration with other companies. Among them:
<ul>
<li>transportations</li>
<li>technical advice</li>
<li>satellite integration in the payload vain</li>
<li>safety and law issues</li>
</ul> </div>
</div>
</div>
</div>
Example with two columns: http://www.bootply.com/bms2sLZ1ZJ
<div class="row">
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Primo</h3>
This is Leaf Space main project. A super lightweight two-stage launch vehicle able to bring up to 50 kg to Low Earth Orbit. The use of composite materials and hybrid proprulsive technology make Primo extremely safe, reliable and enviromental friendly, ensuring precise orbit inserction and extremely low risk of failure. All the components are designed with reusability in mind for future implementation of a reusable launch vehicle. </div>
</div>
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Seed</h3>
Thanks to its great versatility and reliability, hybrid propulsion can be used for several applications. Leaf Space is developing Seed, a next generation hybrid rocket motor designed for in space applications such as:
<ul>
<li>orbital maneuvers</li>
<li>re-orbiting</li>
<li>de-orbiting</li>
</ul>
The first design is dedicated to nano and microsats, other future improved versions will serve also heavier satellites. </div>
</div></div>
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">LeafLine</h3>
A ground stations network exclusively dedicated to nano, micro and smallsats is under development. LeafLine can support several orbits and different transmission protocols. A direct encrypted online link ensures simple and safe data collection and control transmissions to satellite operators. </div>
</div><div class="media services">
<div class="media-body">
<h3 class="media-heading">Other Services</h3>
Other Services
To complete the offer of Leaf Space, a series of services dedicated to nano and microsatellites will be available, also in collaboration with other companies. Among them:
<ul>
<li>transportations</li>
<li>technical advice</li>
<li>satellite integration in the payload vain</li>
<li>safety and law issues</li>
</ul> </div>
</div></div>
</div>
Obviously the second produces a cleaner result as far as padding goes.
Related
So I've been using bootstrap for a while, I've got a super simple grid setup that's working perfectly fine on Chrome/Firefox, but is stacking improperly in Safari:
Here's the markup, which I really can't see anything wrong with! Also visible live at www.inspiringtravelcompany.co.uk in case you're looking at any containing divs.
<div class="w-100 pb-5" style="background-color:#f7f7f7">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 order-2 order-md-1">
<p class="fs-20 mb-2 ChronicleDeckSemiBold" style="line-height:1.3;">
You may have seen us recently during your favourite television programmes – and if not we’d love to share our brand new video with you.
</p>
<p class="fs-14 mb-2 ChronicleDeck">
Take a look, and you’ll spot some of our most popular destinations and favourite bucket list spots around the world.
</p>
<p class="fs-14 mb-2 ChronicleDeck">
Here at the Inspiring Travel Company we specialise in bespoke, personalised and tailor-made holidays around the world to the most amazing places; so whether you’re after a relaxing ‘fly and flop’ break or an intrepid tour, a bucket list safari or a trip to catch the world’s premier sporting events, our Travel Specialists are ready and waiting to offer first-hand insight.
</p>
</div>
<div class="col-12 col-md-6 order-1 order-md-2 mb-4 mb-md-0">
<iframe class="w-100" width="640" height="385" src="https://www.youtube.com/embed/x5sqxiO_muk">
</iframe>
</div>
</div>
</div>
</div>
I just don't get what the problem is!
the images are saved .jpg.
A background image works, even though it isnt the image i want.
Also two more images further down the site do not show either.
Everything works fine locally.
thanks.
<div id="container">
<div id="services" class="row">
<div id="Srvc" class="col-md-6">
<img class="imgCircle" src="assests/images/front-sun.jpg" alt="Finished Lawn">
<h3>Landscape Design and Maintenance</h3>
<p>generic para..Never worry about your front or backyard looking as beautiful as the first day it was installed when is in charge of your yard care and maintenance. Get a free yard care estimate today</p>
</div>
<div id="Srvc" class="col-md-6">
<img class="imgCircle" src="assests/images/wall.jpg" alt="Retaining Wall">
<h3>Masonry Solutions</h3>
<p> generic para...Never worry about your front or backyard looking as beautiful as the first day it was installed when is in charge of your yard care and maintenance. Get a free yard care estimate today</p>
</div>
</div>
On my Wordpress page, I have the following code:
<div class="row">
<div class="col-md-6">
<a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
<img class="img-responsive" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " /></a>
</div>
<div class="col-md-6">
<h1 class="text-center">Vision</h1>
<span style="font-size: 12.0pt;">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</span>
<h1 class="text-center">Mission</h1>
<span style="font-size: 12.0pt;">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</span>
<ul>
<li><span style="font-size: 12.0pt;">Building, managing and supporting cross-sector coalitions</span></li>
<li><span style="font-size: 12.0pt;">Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</span></li>
<li><span style="font-size: 12.0pt;">Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</span></li>
<li><span style="font-size: 12.0pt;">Advocating and shaping policy to support improvements of systems</span></li>
</ul>
</div>
</div><!--end div class="row"-->
You can see how it looks here.
As you can see, the text stays floating to the right 50% inside the wordpress page template area. I would like the text to start taking up 100% of the available area once it hits a new line that is underneath the first picture column to the left.
For an example of how I want it to look, check out our old Squarespace site and zoom in if you have a high aspect ratio.
I know similar questions have been asked before but I have not been able to find an answer while using the Bootstrap framework.
Bootstrap is not terribly different than designing in tables. I mean, they even call them rows and columns. It's 1990's web design using CSS. (I'm only half kidding).
If you want that image to do what you're asking, you should combine your bootstrap columns (just use one col-md-12) and use CSS to float the image left.
Your other option is to decide what text you want always to the side of the image, and what you want under it, and to move that text to a new row with a new col-md-12.
See this answer, it is about Bootstrap - Wrapping Columns Around Larger Column
This is not a 'bootstrap' specific issue. All bootstrap does is use some class names with a long stylesheet.
Unrelated - I would remove those inline styles also.
Thanks to the tips of both #BenFried and #Rkhayat , I was able to come up with some code that is functioning.
<div class="row">
<div class="col-md-12">
<a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
<img class="img-responsive" style="float: left; padding-right: 1em; padding-bottom: 1em;" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " width="50%" />
</a>
<h1 class="text-center">Vision</h1>
<p class="text-justify">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</p>
<h1 class="text-center">Mission</h1>
<p class="text-justify">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</p>
<ul>
<li>Building, managing and supporting cross-sector coalitions</li>
<li>Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</li>
<li>Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</li>
<li>Advocating and shaping policy to support improvements of systems</li>
</ul>
</div> <!-- end <div class="col-md-12"> -->
</div> <!-- end <div class="row"> -->
I have two bootstrap items one col-md-5 and one col-md-4. But i want to centered these two items in the middle of the page, both of them. Now my col-md-4 is at the left side of the page and the col-md-5 is at the middle of the page. Has anyone an idea how to centered these two items without use only margin.
<div class="col-md-4">
<div class="klantcases">
<h2>Company</h2>
<li>Over ons</li>
<li>Kernwaarden</li>
<li>Missie en visie</li>
<li>Nieuws</li>
<li>Blog</li>
<li>Development Blog</li>
<li>Marketing Blog</li>
<li>Development</li>
<li>Marketing</li>
<li><a href="#">Werken bij ons></li>
</div>
<div class="col-md-5">
<div class="blogpreview">
<img src="img/kan.png" alt="kan" /><h1>The latest from our</br>
DEVELOPMENT BLOG</h1>
<img src="img/bloglaptop.jpg" alt="bloglaptopcode" />
<div class="bloginfo"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
<h1>CSS styleable, vector based icons on every device (even IE8)</h1>
<p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 13 april 2015 - 13:19</h2>
<h1>Inline video on the iPhone</h2>
<p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 30 maart 2015 - 18:30</h2>
<h1>Video in email: today or tomorrow?</h2>
<p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<img src="img/pfoon.png" alt="pfoon" /> <h1>The latest from our</br>
MARKETING BLOG</h1>
<img src="img/iphone.jpg" alt="iphonehand" />
<div class="bloginfo2"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
<h1>CSS styleable, vector based icons on every device (even IE8)</h1>
<p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 13 april 2015 - 13:19</h2>
<h1>Inline video on the iPhone</h2>
<p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 30 maart 2015 - 18:30</h2>
<h1>Video in email: today or tomorrow?</h2>
<p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
</div>
You can offset columns in bootstrap. See Docs.
By using a class such as, col-md-offset-4 you can push your columns across the page.
In your case you would need to adjust your columns to make up an even total, e.g. col-md-4 and col-md-6, and then add col-md-offset-1 to offset the first column by 1 column.
Since the Bootstrap default grid has 12 columns, you cannot center the 9 columns grid with the default Bootstrap offsets. So all you need to do is create a custom 1.5 offset (which left margin would be equal to 1.5/12*100% = 12.5%) and apply it to the .col-md-4 container:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-custom">...</div>
<div class="col-md-5">...</div>
</div>
<!-- / .row -->
</div>
<!-- / .container -->
#media(min-width: 992px && max-width: 1199px) {
.col-md-offset-custom {
margin-left: 12.5%;
}
}
JSFiddle: http://jsfiddle.net/Lq06L4hb/2/
http://ebullience-tech.com/services.html link to the website
this is my code and have two diferent section left with detail and right with index of the detail, and I want these to get aligned in straight coloumn when opened on mobile, but its not getting aligned, please help
<section id="tabs" class="element">
<div class="container">
<div class="element-sec">
<h3>Domains we have <i>EXPERTISE</i></h3>
<div class="theme-tabs2">
Software Development
</ul><!-- Selectors -->
<div id="myTabContent" class="tab-content aligned">
<div class="tab-pane fade active in" id="software_development">
<div class="col-md-3">
<img alt="" src="images/resource/aligned2.jpg" />
</div>
<div class="col-md-9">
<h3> Software Development</h3>
<h2 style="font-size: large">Softwares plays the key role in maintaining records, data, accounts, ledger, stocks
in a corporate or in an Industry with ease and accuracy. Holding and maintaining large data was a challenge for
human from years but after the evolution of technology its not a big deal now very complex calculations are
now solved in milli seconds. This evolution has increased the efficiency and accuracy of Industries and their
work.
We Provides software development for all types of business need list of softwares we are providing is:</h2>
<ul class="theme-list">
<li><i class=""><img></i>✓ Inventory and Stock Management</li>
<li><i class="icon-check-sign"></i>✓ Account Manager</li>
<li><i class="icon-check-sign"></i>✓ Billing Solution</li>
<li><i class="icon-check-sign"></i>✓ Invoice and Purchase Order</li>
<li><i class="icon-check-sign"></i>✓ Employee Management</li>
<li><i class="icon-check-sign"></i>✓ Payroll Manager</li>
<li><i class="icon-check-sign"></i>✓ Business Analytics</li>
<li><i class="icon-check-sign"></i>✓ ERP</li>
</ul>
</div>
</div>
<div class="tab-pane fade in" id="web_development">
<div class="col-md-4">
<div class="progress">
<div style="width: 85%;" class="progress-bar"><span><HTML /></span> <i>85%</i></div>
</div>
<div class="progress">
<div style="width: 45%;" class="progress-bar"><span><?PHP</span> <i>45%</i></div>
</div>
<div class="progress">
<div style="width: 90%;" class="progress-bar"><span>{CSS}</span> <i>90%</i></div>
</div>
<div class="progress">
<div style="width: 70%;" class="progress-bar"><span>DESIGN</span> <i>70%</i></div>
</div>
</div><!-- Progress Bars Simple -->
<div class="col-md-8">
<h3> Website Development</h3>
<p>Maintaining your presence globaly is a deed now a days in terms of business expansion in which a website gives you
the best result. Website can also be used as applications where you can maintain your data and make mathematical
operations to obtain results. Websites are mainly of two types <i>Static</i> and <i>Dynamic</i>. A static website is an informational website which
contains all the business and contact informations about the organizatoin or individual , no changes can be made in
run time on a static website. whereas a dynamic website contains more flexibility where you can intereact with database
and make changes to your profile and data on run time. Dynamic websites are widely used because they can
be used as a application which can be operated from anywhere in the world without any installation or specific
requirements. We are developing websites on all the major languages like .Net, Java, Php. and back end on SQL Server and MYSQL.</p>
</div>
</div>
<div class="tab-pane fade in" id="mobile_app">
<div class="col-md-3">
<img alt="" src="images/resource/mobile.png" />
</div>
<div class="col-md-9">
<h3>Mobile Apps Development </h3>
<h2 style="font-size: large">Softwares plays the key role in maintaing records, data, accounts, ledger, stocks
in a corporate or in an Industry with ease and accuracy. Holding and maintaining large data was a challenge for
humen from years but after the evolution of technology its not a big deal now very complex calculations are
now solved in mili seconds. This evolution has increased the efficiency and accuracy of Industries and their
work.
We Provides software development for all types of business need list of softwares we are providing is:</h2>
<ul class="theme-list">
<li><i class="icon-check-sign"></i>✓ Android Application</li>
<li><i class="icon-check-sign"></i>✓ Windows Phone Application</li>
<li><i class="icon-check-sign"></i>✓ IOS Application</li>
</ul>
</div>
</div>
<div class="tab-pane fade in" id="soft_web_testing">
<div class="aligned">
<div class="col-md-3">
<img src="images/resource/testing.png" alt="" />
</div>
<div class="col-md-9">
<h3>Testing</h3>
<h2>We evaluate an attribute or capability of a program or system and determine that it meets its required results.</h2>
<p>Testing is an important part of a successful running product, Without testing the development is not completed.
We provides testing services to companies which are working in development field. <i></i></p>
</div>
</div>
</div>
<div class="tab-pane fade in" id="seo">
<div class="aligned">
<div class="col-md-3">
<img src="images/resource/seo.jpg" alt="" />
</div>
<div class="col-md-9">
<h3>Search Engine Optimization</h3>
<h2>Help your site to get placed at good rank in a search engine.</h2>
<p>Positioning <i>your website on top rank</i> in search engine(Google, Yahoo, Bing) search result is termed as SEO.
SEO is one of the most useful service for anyone who is running web based business, products and services are mostly searched on Search engines so if you
have a good rank their you will have get a better response among all the other rival sites.<i></i></p>
</div>
</div>
</div>
<div class="tab-pane fade in" id="graphic_design">
<div class="aligned">
<div class="col-md-3">
<img src="images/resource/graphic.jpg" alt="" />
</div>
<div class="col-md-9">
<h3>Graphic Designing</h3>
<h2>We Believe in developing Best Graphics according to our client's need.</h2>
<p>Graphic design is the art of communication, stylizing, and problem-solving through the use of type, space and image.
Our graphic design include identity (logos and branding), publications (magazines, newspapers and books),
print advertisements, posters, billboards, website graphics and elements, signs and product packaging.<i></i></p>
</div>
</div>
</div>
<div class="tab-pane fade in" id="marketing">
<div class="aligned">
<div class="col-md-3">
<img src="images/resource/marketing.jpg" alt="" />
</div>
<div class="col-md-9">
<h3>Advertising & Marketing</h3>
<h2>Experience the Power of Advertising & Marketing</h2>
<p>Social Meadia has a great reach to people, it connects people and group of people, and marketing you product on social media means
marketing directly to the end user. Most visited websites now a days are social media websites like facebook, twitter, google+
they are connected to billions of people. We are providing social media marketing on Facebook and Google+.<i></i></p>
</div>
</div>
</div>
</div>
<div class="list-group nav-tabs" id="myTab">
Software Development
Web Development
Mobile Apps Development
Software/Web Testing
Graphic Designing
Social Marketing & Advertising
</div>
</div>
</div>
</section>
It's not a problem of alignment of sections and divisions , your whole layout needs to be configured for mobile .
You can use media tag in css3 :
#media (max-width: 1024px){}
for tablet layout
and :
#media (max-width: 770px){}
for mobile layout
And in those tags you can use the same classes and IDs to override your styles to fit mobile and tablet layouts.
I also recommend you resizing then uploading the software development image (since it's original size "1200px*1179px" is really disturbing on mobile ) and to give to your containers :
width:100%;
max-width:1024px;
in order to get a better structured and responsive ready layout .