I've run into an issue that I can't seem wrap my head around.
Using Bootstrap 4 and HTML and I'm not that good at CSS or CSS3, this is my first undertaking of getting things to align or following a design that was handed from a designer and put it to html and css.
I need to align the ending of one row or container with the right margin of the upper slider and i need to do the same for the second row or container except align it with the opposite margin of the upper slider.
To better explain please refer to the image.
I need the image that is in those rows or containers to be responsive and grow as the row or container grows and stop till it reaches about the red lines.
Here's my code so far:
<div class="container">
<div class="row">
<div id="slider20" class="rev_slider" style="width:100%;">
<ul style="padding-left: 0px;">
<div class="caption">
<h1 class="jumbo-text">some text</h1>
</div>
<li data-transition="slideleft" data-slotamount="1" data-thumb="/*/img5_thumb.jpg">
<img src="assets/images/background.jpg" class="img-responsive" style="width:100%; height:100%;">
</li>
</ul>
</div>
</div>
</div>
<div class="flex-nowrap align-items-start align-content-start d-flex flex-row-reverse justify-content-start container-fluid" style="padding-left: 0;
padding-right: 0;">
<div class="row ml-auto">
<img src="assets/images/elipseleft1.png" width="100%" />
</div>
</div>
Related
I tried to align several items by using two columns and positioning the text, icon, and line within the left column and the other text on the right column, but they don't align properly. It currently looks like this but it should look like the picture attached. How can I fix this?
<div class="col-12">
<h1 class="orange">LET'S RUB IT IN</h1>
<h2>How Much?</h2>
</div>
<div class="col-6"> <!--left column-->
<div class="circle side">
<img src="./chemical#2x.png" alt="chemical" class="icon">
</div>
<h5 class="side">1 Shot Glass<br>or 1 oz.</h5>
<div class="line v side"></div> <!--vertical line-->
</div>
<div class="col-6"> <!--right[enter image description here][1] column-->
<p>To fully cover your body, you'll need about 1 ounce of sunscreen or just enough to fill a shot glass.</p>
</div>
It looks like the issue is you aren't using the .container > .row > .col convention. You've skipped the .container, and are sometimes skipping the .row. Additionally, you are not using the grid for the section shown in your screenshot.
Refer to the Bootrap documentation when there are Bootstrap issues.
https://getbootstrap.com/docs/5.0/layout/grid/
The first thing is you should wrap all/most of your <body> content in a <div class="container-fluid">.
Then add any missing .rows.
This is what you have:
This is what you should have:
Write the contents of that next section to match your design.
ex.
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-6" style="border-right: 2px solid orange;">
<div class="circle side" data-sr-id="9" style="visibility: visible; opacity: 1; transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
<img src="./chemical#2x.png" alt="chemical" class="icon">
</div>
</div>
<div class="col-6">
<h5 class="side">1 Shot Glass<br>or 1 oz.</h5>
<div class="line v side"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<p>To fully cover your body, you'll need about 1 ounce of sunscreen or just enough to fill a shot glass. </p>
</div>
</div>
You can Refere Bootstrap Grid System
Here:https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
It will fix your problem
How can I adjust my 'card' so that it is displayed across the entire width of the screen?
I am using bootstrap
<div class="card">
<h4 style="margin-top: 5px; width: 100%;">{{$tipo->tipo }}</h4>
</div>
i need width similar to footer
If you are using the latest Bootstrap 4 then this code will create a card across the entire width:
<div class="card w-100 mt-2">
<h4>Restaurante</h4>
</div>
If there is still a gap then it is likely you have padding on the container div surrounding the card, so you would need to remove that.
the first thing you need to notice it's that card class display is flex in bootstrap.Also card-body has a 20px padding.So the first thing you need is use p-0 in card-body then devide your card body to multi row.So you below code:
<div class='card'>
<div class='card-img-top'>
<img src='...' />
</div>
<div class='card-body p-0'>
<div class='row mx-0'>
<div class='col-12 p-2'>
...card content
</div>
</div>
<div class='d-block px-0'>
<h4>Your footer</h4>
</div>
</div>
</div>
if you put a clear image to view what you want,I will help you more.I hope I could help you.
EDIT: As requested here is the jsfiddle
When the screen gets too small for the text to fit in the row, it just overlaps other rows, rather than extending the row height. Perhaps this is because I set row heights on every row as a percentage value, in order to lay out my html page with even spacing and vertical alignment. How do I correct this overlapping of text onto other rows? Should I be looking into somehow vertically aligning my rows without setting their height? Or can I keep it the way it is and add some kind of overflow property to each row to tell them to extend their height when necessary?
All relevant images and code:
screenshot of fullscreen (good - no problems yet)
screenshot of hovering over the middle row element on smaller screens (problems)
screenshot of hovering over the bottom row of smaller screens:
all my html for the page:
<div id="landing-page" class="text-uppercase">
<div class="row hidden-lg-up" style="height:20%;overflow-y:auto;">
<div class="col-xs-3 flex-xs-middle">
<img width="100" src="images/monster2.png" />
</div>
<div class="col-xs-3 offset-xs-6 flex-xs-middle">
<img class="pull-xs-right" width="100" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:95%;overflow-y:auto;">
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img width="80%" src="images/monster2.png" />
</div>
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img class="pull-xs-right" width="80%" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:5%;overflow-y:auto;">
<h4 class="display-6 flex-xs-bottom">
*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!
</h4>
</div>
</div>
all my css for the page:
div#landing-page {
background-color: #696969;
height: 100%;
padding: 110px 40px 0px 40px;
overflow-y: auto;
min-height:470px;
}
EDIT: As requested here is the jsfiddle
Alright. Now the question is clear. The problem was easy to fix.
The problem is in the following div. You have specified it to have col-md-12 but you didn't force it when the screen is xs
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
so the simplest thing is to add col-xs-12 class to prevent overlapping
See example
i have the following:
"
<div class="container">
<div class="row">
<div class="col-md-3">
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div class="col-md-offset-10">
<h6 id="dateTime">23/07/2015 12.00</h6>
</div>
</div>
</div>
</div>
<div class="panel-body">
</div>
<div class="panel-footer"></div>
"
Using only bootstrap, is it possible to center the two vertical labels of different dimensions (Current Job and Date) contained in Header panel (that contains a grid) and how to do it?
You need to alter the CSS for the following containers:
<div class="col-md-3"> and <div class="col-md-offset-10">
Giving both containers float: none; and margin: 0 auto will definitely center both. If you want the text to be centered as well, add some text-align: center
That should have you covered.
Sorry, forgot to mention that the container <div class="col-md-offset-10"> needs to match the width of the other container (25%).
You can do this by removing classes from your div tags for labels and giving text-center class to div with class row. This will make both labels appear in the middle of the page and one after another vertically. this is what your code container will look like:
<div class="container">
<div class="row text-center">
<div>
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div>
<h6 id="dateTime">22/07/2015 12:00:00</h6>
</div>
</div>
</div>
Here's my HTML:
<div class="navbar navbxar-inverse navbar-fixed-bottom" role="navigation" style="min-width: 320px; height: 51px;">
<div class="container-fluid" style="display: table;">
<div class="row row-mod">
<div class="col-xs-7 col-xs-7-mod" style="background-color: blue;">
<a class="navbar-logo pull-left" href="/"><img class="img-responsive" src="http://s24.postimg.org/intj0mv3l/logo.jpg" /></a>
<span class="navbar-footer-text-container">
<span class="navbar-footer-text">CUSTOMER SERVICES | STORE </br>COPYRIGHT © BRND 2006/2014</span>
</span>
</div>
<div class="col-xs-5 col-xs-5-mod" style="padding-right: auto; background-color: red;">
<img style="margin-left: 1px;" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
<img style="margin-left: 1px;" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
<img class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
</div>
</div>
</div>
</div>
My CSS is added to JSFiddle.
Currently the problems are:
1. The bigger yellow image is not centered vertically in the blue div, it is on the bottom of the div
2. The smaller yellow images are not centered vertically in the red div, they are on the top of the div
3. The smaller yellow images are not on the right of the red div. There is a little space, I couldn't find why this space appears
4. The yellow images are set to be responsive. I've set this, because I've also set a rule to resize the navbar under 410px to have only 39px height. This feature is necessary, because then on smaller screens the text doesn't have to go to the next row, so everything fits like on bigger screens. The problem is that it isn't working this currently.
Do you have any clues for these problems?
Edit:
I would like to achieve the following layout:
1. The bigger image (the logo) and the text should be on the left side
2. The text after the logo must be in 2 lines and the space between the two lines should be small
3. The other three images should be on the right
4. The navigation bar should have a width as the window
5. The content on the navigation bar should have a maximum widht of 976px
6. The navigation bar should have a height of 51px
7. The text should have an 8pt size
These settings should be changed a bit when the screen size is lower than 410px. This is necessary, because under 410px the content cannot fit in the space, so in case the navbar is only 39px and also the images will be resized according to this height than everything can fit.
the main issue is your mix of inline and external styles, quite a mess. Within that mess, you have that bottom nav with a display:table declaration. Basically, you're trying to re-invent the wheel. I don't know why are you doing this, but following your logic, I've fixed your code so it works. See fiddle and HTML code below.
<div class="navbar navbxar-inverse navbar-fixed-bottom navbar-bottom" role="navigation">
<div class="container-fluid" style="display: table; padding:0; margin:0 auto">
<div class="row row-mod">
<div class="col-xs-7 col-xs-7-mod" style="background-color: blue; ">
<a class="navbar-logo pull-left" href="/"><img class="img-responsive" style="margin-left: 1px; margin-top:-9px; display:inline; vertical-align:50%; height:47px;" src="http://s24.postimg.org/intj0mv3l/logo.jpg" /></a>
<span class="navbar-footer-text-container">
<span class="navbar-footer-text">CUSTOMER SERVICES | STORE </br>COPYRIGHT © BRND 2006/2014</span>
</span>
</div>
<div class="col-xs-5 col-xs-5-mod" style="padding-right: auto; background-color: red; ">
<img style="margin-left: 1px; margin-top:9px" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
<img style="margin-left: 1px; margin-top:9px" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
<img style="margin-left: 1px; margin-top:9px" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
</div>
</div>
</div>
Now, my suggestion would be for you to use Bootstrap as it is, it really works fine without any reinvention.