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
Related
In Bootstrap 5 - I have various pages, sometimes 2 columns, sometimes 3.
The template system I'm using tests for the need for the third column and adds it.
<div class="container pt-5">
<div class="row gx-5">
<div class="col-sm-12 order-2 order-md-1 col-md-3">
<!-- Left column content here -->
</div>
<div class="col-sm order-1 col-md-6">
<!-- Center column content here -->
</div>
<!-- an if statement goes here which I won't bother everyone with-->
<div class="col-sm-12 order-3 col-md-3">
<!-- Right column content here -->
</div>
<!-- the if statement ends here-->
</div>
</div>
This works just fine for a three column layout. But in the template that third column (right column) is sometimes (intentionally dropped). For this two column layout, this layout still works just fine except that the center column NOW needs to be col-md-9 instead of col-md-6.
I can make the template change this, so it's "operational", but I would like to stick with layout being fully handled by bootstrap, so to speak.
I thought well fine, col-md-auto and it should resize to whatever it needs.
If I put in "col-md-auto" in the place of "col-md-6" that center column skips to a new line.
I assume there is either a way to force to row so md-auto spans 9 like I would like it to in that case OR I'm totally missing something.
As always I much appreciate everyone's help.
Please let me know if I am missing anything.
With a few comments I received I realize I see I was unclear, with the above bootstrap classes, we get the small breakpoint giving the three columns stacked, with "center" on top, "right column" in the middle, and "left column" last.
Then for anything above "sm", it gives "left column" left, "center column" center, "right column" right
The only problem being when their is no left column (which is a valid condition for this site) the center, in sizes above "sm" needs to take up the remaining space (which would be col-9 when their is no right column, or col-6 when their is).
Just change <div class="col-sm order-1 col-md-6"> to <div class="col order-1">. Now this column will have auto width.
Whole code
<div class="container pt-5">
<div class="row gx-5 bg-primary">
<div class="col-sm-12 order-2 order-md-1 col-md-3 bg-warning">
<!-- Left column content here -->
</div>
<div class="col order-1 bg-info">
<!-- Center column content here -->
</div>
<!-- an if statement goes here which I won't bother everyone with-->
<div class="col-sm-12 order-3 col-md-3 bg-body">
<!-- Right column content here -->
</div>
<!-- the if statement ends here-->
</div>
</div>
In this case I was unable to resolve just using bootstrap.
I did need to put an if statement in the templating engine.
So my final code was, the templating engine creating different templates based on two or three column.
I believe my theory was flawed, that it would be better to put this towards bootstrap (in terms of dealing with 2 or 3 columns) when it was really a decision to be made by the templating engine to then generate a 2 column layout with x bootstrap code or three column.
Thank you for eveyones time.
I thought this would be the best way to close it.
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.
I am editing a site to be 3 columns.
Here is example page, currently 2 columns:
https://courses.guitar-dreams.com/lessons/an-introduction-to-triads-and-their-inversions/
So what we have is a header, sidebar, content area, and footer. Seems pretty straightforward. But as I look at the HTML, the structure is so odd. Here is how this page is arranged:
<body>
<div class="learndash-wrapper">
<div class="ld-focus">
<!-- notice how it is starting out with sidebar even though we have 2 headers on top of each other... -->
<div class="ld-focus-sidebar">
<div class="ld-focus-sidebar-wrapper">
<div class="ld-course-navigation">
Here is sidebar navigation content
</div> <!--/.ld-course-navigation-->
</div> <!--/.ld-focus-sidebar-wrapper-->
</div> <!--/.ld-focus-sidebar-->
<!-- ok now the main content -->
<div class="ld-focus-main">
<!-- oh but wait, let's add header first! And namely the 2nd header! -->
<div class="ld-focus-header">
Here is the 2nd header
</div> <!--/.ld-focus-header-->
<!-- ok now that we added 2nd header, let's add main content! -->
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
</div> <!--/.ld-focus-main-->
</div> <!--/.ld-focus-->
<!--/.ld-learndash-wrapper-->
<!-- Oh wait, now that we are at end, let's add that first header now! -->
<div id="wpadminbar" class="">
The topmost header
</div>
</body>
You see what I mean? I am not a web design expert, but I tend to believe that layout of pages generally should follow similar principles to the document publishing world. That is, if your page starts with header, probably good idea for that to be the first design element that you add, and not the last, and moreover, that the design element, if possible, should be placed in the design environment in a way that has physical correspondence to the rendered document.
I am trying to add a right sidebar to make it a 3 column layout. I tried adding a wrapper div to <div class="ld-focus-main"> with display: flex and followed some of the approaches here:
http://geniuscarrier.com/2-columns-layout-with-flexbox/
<div class="ld-focus-main">
<div class="ld-focus-header">
</div> <!--/.ld-focus-header-->
<div class="mywrapper">
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
<div class="mysidebar">My sidebar</div>
</div>
</div> <!--/.ld-focus-main-->
Here I used (as inline styles)
.mywrapper {
display: flex;
align-items: center;
}
.ld-focus-content {
flex-grow:1
}
I didn't use properties on the right sidebar since in the example in the link above it suggested that if all is well with wrapper and left then right part will follow suit.
But above doesn't produce desired result. At bottom of page linked above you see my added divs and "My Sidebar". I think part of the problem is that the theme template uses such bizarre placement of divs and properties such that when I try to add that right column the underlying structure is not making it work as expected. Sort of like 2nd, 3rd order effects... as well as a Jenga game within a Jenga game.
I was thinking about just redoing the entire template, but at this point I would prefer to just add a sticky right sidebar without a ton of rework. That said, to me it seems the proper way to do such a layout, syntactically would be
<div class="mainwrapper">
<div class = "firstheader"></div>
<div class = "secondheader"></div>
<div class = "outercontentwrapper"></div>
<div class = "leftnavigation"></div>
<div class = "contentwrapper">
<div class = "maincontent"></div>
<div class = "rightsidebar"></div>
</div>
</div>
<div class = "footer"></div>
</div>
Just not sure all the specific properties such that the page would behave as is now, plus add a right sidebar.
So with all that, how would you go about adding that right column?
Thanks!
Brian
I'm currently building an application for a Pomodoro Timer, I'm using Bulma as a CSS Framework, and so far I'm loving it, I'm still learning how Flexbox works, I would like to know what would be the best approach to this situation and if it can be done using only Bulma classes or if I would have to create my own.
I'm trying to create "cards" for each task added, but I want them to be just about half or less that the full screen width. I don't understand how to make this happen using Bulma, since everything just takes the full width and I can't just center everything since it doesn't have a hard-coded width. This is my code for the section that contains the task cards.
<div class="section">
<div class="task-container is-center">
<div class="card is-clearfix is-1-touch" style="margin-bottom: 10px" v-for="task in tasks" :key="task.id">
<input type="checkbox" class="checkbox">
<span class="has-text-left">
{{task.desc}}
</span>
<span class="icon is-pulled-right has-text-danger"><i class="far fa-times-circle"></i></span>
<span class="icon is-pulled-right has-text-primary"><i class="far fa-play-circle"></i></span>
</div>
</div>
</div>
Any help, tips, suggestions, etc. Would be greatly appreciated!.
You could use columns classes to achieve what you want
<div class="task-container columns is-multiline">
<div class="card column is-half is-offset-one-quarter">
// statements
</div>
</div>
Here is the link to the official documentation: https://bulma.io/documentation/columns/options/#centering-columns
You could wrap the card div with a columns container and use the is-half class if you don't want to use the offset class.
Below is my code for the entire container that contains a row with a "span5 well" and a "span6".
If I make the 2nd a "span7", although they do add up to 12, the WELL causes the 2nd span to shift to next row. Even at desktop resolution. The Form only has a few inputs and I did not use text field labels, I used placeholders to take up less space. there are a few parts to this question.
How can I left align the form inside the well? right now it wants to go right, and also hangs off the well a bit.
Should I even use the "well" to hold the form, or should I just put a border around the "span5" and make the background color grey to resemble the "well" background ?
here is the code
<div class="container">
<div class="row">
<div class="span5 well" style="border-radius:10px">
<h3 style="text-align:center">Let us know how we can help</h3>
<hr>
<div><%= render "customers/form"%></div>
</div>
<div class="span6">
<div>
<%= image_tag 'Sprinkler2.png' %>
</div>
</div>
</div>
</div>