I am using bootstrap to build my site and in one location I have two divs stacked on top of each other to the right of an image. The two divs should each be half the height of the image as long as the browser is over 767px and be responsive as well.
Here is a jsfiddle: http://jsfiddle.net/dC7z5/
<div class='row subhead'>
<div class='col-sm-9'>
<img src="http://placekitten.com/900/554" class="img-responsive" />
</div>
<div class='col-sm-3'>
<div class='row'>
<div class='col-sm-12 services'>
<p>Services</p>
<ul>
<li>first service</li>
<li>another service</li>
</ul>
</div>
</div>
<div class='row'>
<div class='col-sm-12 specs'>
<p>Tech Specs</p>
<ul>
<li>one spec</li>
<li>second spec</li>
</ul>
</div> <!-- end specs -->
</div>
</div>
</div>
Here's an image of what I'm trying to do: http://laurenpittenger.com/here/wp-content/uploads/2014/01/Screen-Shot-2014-01-05-at-4.46.31-PM.png
Create a div container that contains both the Service box, and the Tech Specs Box. Then, in the css, make the container the same height as the image. Do this to the Service and Tech Specs Box:
height:50%;
Related
I've written something of a 'custom' nav bar using Bootstrap 4.5.
Basically, it's two columns/grids with a logo in the right column and a list that acts as a nav bar in the other.
I am really pleased with how it looks on a laptop/computer/tablet etc:
But it looks awful on mobile because the logo is aligned to the left (inherited, not actually using anything to align it left) and the list is aligned to the right (class="... text-right ...").
I'd like to make it so both the logo and list are aligned center on smaller mobile. I've tried a few things, like using an #media attribute in css with float:center;, and the only other way I can think to do this is to make the normal nav bar hidden/invisible on mobile and add a new one that's only visible on mobile, but I really don't want to have to do that as it'd mean I'd have to add links to the list twice etc.
I also tried aligning just the list center with this documentation: https://getbootstrap.com/docs/4.0/utilities/text/, but it didn't work.
My current nav-bar is:
<div class="topsection">
<div class="container">
<div class="row">
<div class="col-sm">
<img class="img-responsive" src="https://cdn.example.com/img/logo2.png" height="50px">
</div>
<div class="col-sm align-baseline">
<p><ul class="list-inline text-right font1">
<li class="list-inline-item active-nb">Home</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">My Work</li>
<li class="list-inline-item">Feed</li>
</ul></p>
</div>
</div>
</div>
</div>
<hr class="main">
(The attributes main and topsection aren't important, they just style the backgrounds of things etc)
Currently, it looks like this on mobile:
Use the Bootstrap utility classes. Alignment is already responsive...
<div class="topsection">
<div class="container">
<div class="row justify-sm-content-between justify-content-center">
<div class="col-sm col-auto">
<img class="img-responsive" src="//placehold.it/120x50" height="50px">
</div>
<div class="col-sm">
<ul class="list-inline text-sm-right text-center py-2 font1">
<li class="list-inline-item active-nb">Home</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">My Work</li>
<li class="list-inline-item">Feed</li>
</ul>
</div>
</div>
</div>
</div>
Demo
.your-class{
display:flex;
place-content:center;
}
should work with basic css.
In a card-tabs element from materialize css framework I'm trying to setup an ag-grid table.
Here is the code.
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab">Test 4</li>
<li class="tab">Test 5</li>
</ul>
</div>
<div class="card-content grey lighten-5">
<div id="test4" style="height: 200px;">
<div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
</div>
<div id="test5">Test 5 content</div>
</div>
</div>
The problem is that I cannot auto resize the height of the element with id='test4' in order to gird be viewable. If I remove the style="height:200px;" from it, the grid doesn't show up. If I added it's being shown but I don't want to keep it statically on 200px since the grid's height could be varied.
Is there any way to make the div with the id='test4' automatically resize itself according to the size of the ag-grid?
I tried to put height:auto; both in card-content and test4 divs but without any success.
Div will not be shown if there is not content in it. Why don't you just put blank   value inside html.
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab">Test 4</li>
<li class="tab">Test 5</li>
</ul>
</div>
<div class="card-content grey lighten-5">
<div id="test4"
<div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
</div>
<div id="test5">Test 5 content</div>
</div>
</div>
The following is part of my website. What it is supposed to do is create two side-by-side regions when there is sufficient width. Otherwise, the regions should be stacked on top of each other.
<body>
<div id="tab-container" class="tabs is-centered is-small is-fullwidth is-marginless is-paddingless">
<ul>
<li id="1" class="is-active">
<a>1</a>
</li>
<li id="2">
<a>2</a>
</li>
<li id="3">
<a>3</a>
</li>
<li id="4">
<a>4</a>
</li>
<li id="5">
<a>5</a>
</li>
</ul>
</div>
<div class="columns is-paddingless is-marginless" style="background: yellow;">
<div class="column is-paddingless is-half" style="background: indigo">
</div>
<div class="column is-paddingless is-half" style="background: black">
</div>
</div>
</body>
When the width is sufficient, the website looks ok:
However, when I shrink the website - and it transitions to stacked mode - the black and purple regions disappear.
How can I fix this?
I have this weird problem with my bootstrap row and I can't figure it out..
If you take a look at this image you see that my row is extending outside of my container fluid for some reason. I applied only one style to container fluid which is max-width: 1600px and padding:0. However, I don't think this is the problem.
Here's how I have my footer structured. As I said, no extra styles applied to the .row itself..
<!-- Start Footer area -->
<div class="container-fluid">
<div class="row">
<h3>Quick Links</h3>
<div class="col-xs-4">
<ul>
<li><a class="register-link" href="#"><button class="footer-register-btn" type="button">Register</button></a></li>
<li>About</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Terms of Service</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Contact</li>
<li>FAQ</li>
</ul>
</div>
</div>
<hr class="hr-devider">
<p class="copyright">Copyright © 2016. All Rights Reserved. Proiect de licenta</p>
</div>
<!-- End Footer area -->
Ok, I figure it out.. The problem was with the fact that I had no padding on the container-fluid. After I added some left and right padding it worked.
been trying to align the logo in the middle between menus trying to make it using foundation zurb.
something like [menu1] [menu2] --[logo]-- [menu3] [menu4].
Sure it might work using the grid system:
<div class="panel hide-for-small-down">
<div class="row">
<div class="large-4 columns">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
</ul>
</nav>
</div>
<div class="large-4 columns">
<img src="http://placehold.it/350x150">
</div>
<div class="large-4 columns">
<nav>
<ul>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
Haven't tried any CSS yet apart from this simple one, don't mind the top-nav class but.
ul li{
list-style: none;
display: inline-block;
padding: 15px;
background: #ccc;
}
I would use display: inline-block and vertical-align: middle
DEMO http://jsfiddle.net/AA49p/1/
.large-4 {
display: inline-block;
vertical-align: middle;
}
Your are having this problem because Foundation grid columns have a certain width which does not depend on the content.
Currently you logo is actually exactly in the center, but of course it doesn't look like it is. That's because the content is justified to the left and your navs are much narrower than their parents ("large-4"s)
It's easier to show.
You will find that this code brings you much closer the desired result:
<div class="panel hide-for-small-down">
<div class="row">
<div class="large-3 columns">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
</ul>
</nav>
</div>
<div class="large-5 columns">
<img src="http://placehold.it/350x150">
</div>
<div class="large-4 columns">
<nav>
<ul>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
All I did was change the first column to "large-3" and the second to "large-5".
Now it looks like it is centered.
May be this result will satisfy you. But know that it's just not the best way to center a logo using grid-columns.
Another easy solution is to "float: right" the right nav.