I have three separate buttons within the same row and container, however due to the content above them, they're not all on the same horizontal line.
This is worsened on a big screen
How can I get all these buttons sitting on the same centre point?
Live URL: http://185.123.97.138/~kidsdrum/moneynest.co.uk/
HTML
<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
The problem is that you can't predict the text in the above sections will always finish at the same point so, as they currently are, it's not technically possible. There are some hacky fixes you could do, but I think the best solution would be to take the buttons out of those containers entirely, and have a separate "row" element that contains them.
That way, if the text in one of the columns gets longer for whatever reason (text added, different screen sizes), the whole "button row" will be pushed down equally and the buttons will always maintain the same baseline
Hope that makes sense
Modify the line in homepagestyle.css
#step1button {
margin-top: 21px;
}
This will fix your issue
The problem with using a seperate row was that on a mobile device all the three buttons (in the seperate row) sat away from their relevant content.
This meant it was very confusing on a mobile device to understand what the buttons took the user to, this looked like:
By adding a simple <br /> I was able to push the one odd button onto the same line as the other two buttons.
I then removed:
#step1button {
margin-top: 30px;
}
So the final HTML looked like:
<div class="container-fluid">
<div class="row">
<div class="fadein bg-3 text-center">
<h3 class="h3big">What do you need help with?</h3><br>
<div class="col-sm-4">
<img src="/img/button-1.png" alt="button-1" class="middleimages">
<div class="box-content">
<p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
<figure><img src="/img/pound-coins.jpg" alt="saving money image" title="Saving money" class="tripleimage">
<figcaption><b>Feel like you're walking on a tightrope every day?</b> <br>Stuck in a pay cheque to pay cheque cycle, can't keep your budget in check, dont have a budget, use credit cards or have no savings? <br><br>
<br />
<b>Lesson 1</b> - Learn how I escaped the pay cheque to pay cheque cycle.</figcaption>
</figure>
<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
</div>
</div>
Related
I have a row class inside a col class using bootstrap 4 which looks perfect on desktop, but for mobile I want to force the row to be below it's parent row when the page is viewed on mobile. So technically I want to 'break out' of it's parent without changing the height of the parent. Here's an example of what I have currently on desktop:
And what I'm trying to achieve on mobile:
My code is just basic bootstrap with no additional CSS changes:
<div id="jumbo" class="row">
<div id="info" class="col-xl-6 col h-100">
<div class="row">
<div id="info-text" class="col offset-md-2">
<p class="display-4">Estate planning made easy</p>
<p>
Let’s get a clear plan in place for your money,<br>
property and other assets here and now.<br>
It’s never too early to protect what’s important<br>
to you and your family.
</p>
<p class="museo-sans-900">Get your free personalised report in just 20 minutes</p>
<button class="btn btn-brand-secondary">Start Now</button>
</div>
</div>
</div>
</div>
You can make two versions of the section. One like the first one and one like the second. Then put id=#desktop for the first and id=#mobile for the second . Then be sure to mark #desktop{display:none} for #media only screen and (max-width: (insert width of mobiles)), and #mobile{display: none} for min-width: (insert width of mobiles) . It s a long way, but if you don t find another easier way you can try this.
My mentor wants me to create a site based off a wireframe he sent, but I haven't been able to position the text on these "hero" images.
It seems like the text is kind of stuck in the right half of the container, which is weird because offsetting them should have shoved them over to the left. Unless, of course, I did it wrong.
I didn't do much to it and I'm confused, especially since I used an offset in the same document that's functioning properly. I tried using classes like justify-content-left, but they seemed to hit an invisible wall in the middle of the container.
<div class="p-2" id="navigationFilter">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-6">
<header class="pt-5">
<p>Enjoy peace of mind knowing that you can</p>
<h1>Quickly send for help and alert loved ones</h1>
<button class="btn btn-lg btn-primary" type="button">Get Started</button>
</header>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</div><!-- translucent-->
You need to remove the offset-lg-6 class.
Offset classes
Move columns to the right using .offset-md-* classes.
These classes increase the left margin of a column by * columns. For
example, .offset-md-4 moves .col-md-4 over four columns.
-- https://getbootstrap.com/docs/4.3/layout/grid/#offset-classes
I am creating a web application in asp.net and I am using bootstrap version 4 for the layout of the site.
I have the following code to include a title on the left hand side (with some additional text) and then the image on the right, however when I resize the screen the image overlaps the "Welcome to the site" before it then eventually stacks the columns.
<div class="container-fluid">
<div class="row portal-intro">
<div class="col-md-4">
<p class="home-header">Welcome to the site</p>
<p>
You can make a variety of applications, reports and requests by using our online forms.
For example you can apply for resident permits, report an issue or you can request a call back.
</p>
</div>
<div class="col-md-8">
<img class="img-fluid" src="~/Content/Images/city.png" />
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
</div>
I used img-fluid to see if that was the issue, but it still happens. The image eventually does stack it's just the "in between" size where it overlaps and is fine when the scree is full width.
I haven't added any additional CSS as this is done by the addition of the img-fluid class.
It may be worth adding that I have also tried setting the image to the background of the column and it does the same, suggesting there may be a problem with the column on the left rather than the image.
The problem is that your text is so large that the individual words don't fit the column space you've allotted. Reduce font size in a responsive way and it's all fine. For example:
#media (min-width: 768px) {
.home-header {
font-size: 30px;
}
}
Problem demonstration
Also, you should be using heading tags for headings. Semantic document structure is important.
I am trying to format a news-feed item and want to include a glyphicon to illustrate the type of news item and then a user defined text field next to it. I would like to have the text formatted such that it is indented about four spaces from the glyphicon (Second news feed item in the JSFiddle where I hardcoded it in a non-reproducible way).
I made a layout where the glyphicon was in a col-xs-1 and the rest of the screen was for the text and then zeroed out all the padding but it still too far to the right for what I would like (Third news feed item in the JSFiddle).
<div class="col-xs-12 news-feed-item-container" style="background-color:white">
<h3><span class="glyphicon glyphicon-earphone"></span>New conversation with Brett Harrsion from Firm XYZ shows there is progress being made towards the product approval</h3>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March</p>
</div>
<div class="col-xs-12 news-feed-divider-yellow"></div>
<div class="col-xs-12 news-feed-item-container">
<h3 style="white-space:pre"><span class="glyphicon glyphicon-earphone"></span> New conversation with Brett Harrsion from Firm XYZ shows there<br> is progress being made towards the product approval</h3>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at Firm XYZ that lead us to believe we will be able to sell product A to them sometime in early March</p>
</div>
<div class="col-xs-12 news-feed-divider"></div>
<div class="col-xs-12 news-feed-item-container" style="background-color:white">
<div class="col-xs-1" style="padding-right:0">
<h3><span class="glyphicon glyphicon-earphone"></span></h3></div>
<div class="col-xs-11" style="padding-left:0">
<h3>New conversation with Brett Harrsion from Firm XYZ shows there is progress being made towards the product approval</h3></div>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March</p>
</div>
JSFiddle:
https://jsfiddle.net/schins02/r0p83uaq/
Image of feed items with styles applied =>
http://imgur.com/a/XTERt
This seems a bit picky so thanks for any help provided!
Given your needs, I would not recommend relying on .col-*-* for your positioning. Your needs are simply below what Bootstrap's Grid framework is designed for.
Instead, I would rely on wrappers with .pull-left and .pull-right to position your icon and content. I've created an example here:
http://www.bootply.com/LwfLZZ2exY
Note: My example makes use of calc() because I wasn't sure how responsive your design approach needed. You may need to adjust this (and of course any other element) to best-suit your intentions.
Using Bootstrap 3.2, I have a section of website that has three divs (.col-lg-3 box) that will have differing amounts of text in them. I'd like them all to extend to the bottom of the containing div (.row). A link to the CSS file I'm using is here: https://github.com/ttmjason/GazoomTravel/blob/master/css/bootstrap.css.
The answers I've seen on Stack Exchange for this general issue (same height divs in a container) either don't use Bootstrap or are have outdated syntax. If you can link me to a SxE question that perfectly mirrors mine, I'll gladly take the downvotes in exchange for an answer.
<div class="container-fluid join">
<h2 class="text-center white-heading" id="join-ita"><strong>Join ITA</strong></h2>
<!-- <hr class="line-black"> -->
<div class="row">
<div class="col-lg-3 box">
<div>
<h3 class="text-center blue-heading">Newcomers Begin Here</h3>
</div>
<p>You will immediately earn 75% of paid commission, payable to you within 2 weeks of receipt. Upon registering, you immediately receive your own <span class="emphasis-blue">GaZoom</span> personalized website, with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.</p>
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button>
</div>
<div class="col-lg-3 box">
<div>
<h3 class="text-center blue-heading">Experienced Part-Time Agents</h3>
</div>
<p>Immediately earn 80% of paid commissions paid within 2 weeks of receipt. Enjoy your business at your pace with the <span class="emphasis-blue">GaZoom</span> family of products and services. Upon registering you will immediately receive your personalized website with our diverse and unique travel opportunities for your clients at your fingertips. A 24 hour assist program is available for you and your clients. You'll be eligible to participate in our corporate and leisure lead generation program. No monthly minimum requirements.</p>
<button type="button" class="center-block btn btn-warning btn-lg">JOIN NOW</button>
</div>
<div class="col-lg-3 box">
<div>
<h3 class="text-center blue-heading">Experienced Full-Time Agents</h3>
</div>
<p>You're eligible to receive one of the highest paid commission levels in the industry: 85%, which is payable within 2 weeks of receipt when you maintain monthly bookings. Bring your clients and enjoy one of the industry's most dynamic and unique inventory and booking sites. Be confident that you and your book of business is protected and can be serviced with our 24 hour assist program. We can assist in growing your business by offering you a lead generation program for corporate travelers as well as leisure travelers.</p>
<button type="button" class="center-block btn btn-red btn-lg">JOIN NOW</button>
</div>
</div>
</div>
There are many ways to create equal height columns. None, unless you're using actual tables, are outdated. Flexbox works for modern browsers. You can use jQuery. You can use really large amounts of padding-bottom and negative margin bottom. You can use display:table on the .row and display:table-cell on the columns (after you remove the floats).
However all of the CSS approaches only give you something like this:
Reference: http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height
This is because there's no margin as gutter in the Bootstrap grid, it's padding.
But what if you want to have some boxes like this?
You can't because there's no margin between. You can use borders and :before/:after, but what if you have a background image as your page's background?
For the last few years I've used a jQuery approach. This is the latest script I'm using and it's very smooth: https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
Here's how to use it (once it's loaded after jQuery):
$(window).load(function() {
$('.the-class-I-want-to-be-equal').responsiveEqualHeightGrid();
});
This can be a child class of the column, which is what allows you to make the second figure in this answer.
Here's an example with some fake content and flush bottom buttons. You'll notice that the equal heights are responsive and they are per visual row, so it's not the tallest of the tall it's the tallest of the nearest siblings. So, essentially, it gives you expected results:
DEMO: http://jsbin.com/tunohe/1/