I am trying to make divs inline in the card box and doing it also. But text is being vertically centered next to. can not managed the make the text start the top.
<div class="card text-left">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="d-inline"><img src="{{$estate->image}}" id="image"></div>
<div class="d-inline">{{$estate->building_name}}</div>
</div>
</div>
Try to use d-inline for to make image and text side by side. But this time text is being vertically aligned.
You have to use d-inline-flex and align-top
<div class="card-body">
<div class="d-inline-flex"><img src="{{$estate->image}}" id="image"></div>
<div class="d-inline-flex align-top">{{$estate->building_name}}</div>
</div>
Related
I am looking for advice how to implement the following layout using bootstrap 4:
I have seen a lot of examples on stackoverflow with the similar idea, but can't find how to make only center panel scrollable. I need something similar to this: https://www.codeply.com/go/woeJ9JxCQn But, the problem with this layout is that the whole page are scrollable, I need to make the center panel always equals to the window height and make the content inside it scrollable, so the scroll appears like on the mockup. Can somebody suggest the solution?
There are several approaches you could take. One way is to make the navbar sticky instead of fixed. Then remove the body padding and set the appropriate heights and overflow on the sidebar, and content area.
https://codeply.com/p/uKyx1izF6Q
<div class="container-fluid sticky-top bg-dark shadow">
<div class="row collapse show no-gutters d-flex h-100 position-relative">
<div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex">
<!-- spacer col -->
Brand
</div>
<div class="col px-3 px-md-0 py-3">
<div class="d-flex">
<!-- toggler -->
<a data-toggle="collapse" href="#" data-target=".collapse" role="button" class="">
<i class="fa fa-bars fa-lg"></i>
</a>
<i class="fa fa-cog"></i>
</div>
</div>
</div>
</div>
<div class="container-fluid px-0">
<div class="row vh-100 collapse show no-gutters d-flex h-100 position-relative align-items-start">
<div class="col-3 p-0 min-vh-100 text-white w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">
<!-- fixed sidebar -->
<div class="navbar-dark bg-dark position-fixed h-100 w-sidebar">
<h6 class="px-3 pt-3">Fixed Menu</h6>
<ul class="nav flex-column flex-nowrap text-truncate">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
<div class="col p-3 overflow-auto h-100">
<h3>Content..</h3>
</div>
</div>
</div>
you can give the side-nav and top-nav a fixed position.
and then give the content panel a margin-top (equal to top-nav height) and margin left (equal to side-nav width).
then there will be scroll only in the content.
don't forget to give the side-bar height 100% or 100vh so it dosn't stretch.
I've got a basic nav-tabs in Twitter Bootstrap and I've got an image after all of my tabs, that I'd like to float right. I've tried modifying its float, text-align, and other attributes, and even the pull-right class as mentioned on a separate but related SO question.
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
<!-- ... -->
<img class="pull-right text-right float-right" src="myimg.png" width="32px" height="32px">
What Bootstrap class or CSS should I write to make my image float to the right?
(Bootstrap 4 if that matters)
<nav class="navbar header navbar-light bg-dark" id="myHeader">
<div class="container">
<p class="">logo</p>
// from here you get all elements on right side
<ul class="list-inline">
<li class="list-inline-item">
<div class="frqst">
<button class="fas fa-users btn text-white"></button>
<div>
<ul class="list-group">
<li class="border-bottom">
<p>first right item
</p>
</li>
</ul>
</div>
</div>
</li>
<li class="list-inline-item">
<button class="fas fa-comment btn text-white">second right item</button>
</li>
<li class="list-inline-item">
<p>third right item</p>
</li>
<li class="list-inline-item">
<img src="../../myimg.jpg">
</li>
<li class="list-inline-item">
<a class="text-white" href="./models/logout.html">Logout</a>
</li>
</ul>
</div>
</nav>
Put a div tag around the image and use d-flex justify-content-end like this:
<div class="row">
<div class="col-md-12">
<div class="">
<div class="">
<ul class="nav nav-pills w-100">
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab"
aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
</ul>
</div>
<div class="d-flex justify-content-end">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/09/f46bc1a6-9ffa-4434-a77a-ea1491d3597a-760x400.jpeg"
class="">
</div>
</div>
</div>
</div>
I tested this. Should work.
Another you can try:
<div class="col-md-12" style="border-top: 2px solid #000;">
<div class="mx-4">
<div class="footer pt-3">
<div class="row">
<div class="col-md-6">
<ul>
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff"
aria-selected="true">Stuff</a>
</li>
</ul>
</div>
<div class="col-md-6">
<div class="float-right">
<img class="pull-right text-right float-right" src="http://placekitten.com/301/301" width="32px" height="32px">
</div>
</div>
</div>
</div>
</div>
</div>
I tried to use #href on my buttons in order to get them to change to another tab but all it ends up doing is adding #name in the url. How can I make it so my next and previous buttons change to the respective tab?
<div class="card text-left">
<div class="card-header bg-danger">
<ul class="nav nav-tabs" data-background-color="red">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" role="tab" style="color:white" href="#generalinfo">General Info</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" style="color:white" href="#companyinfo">Company Info</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" style="color:white" href="#socialmedia">Social Media</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="generalinfo" role="tabpanel">
<form action="" id="generalInfo">
Next
</form>
</div>
</div>
</div>
<div class="tab-pane" id="companyinfo" role="tabpanel">
<form action="" id="companyInfo">
Back
Next
</form>
</div>
Any help would be greatly appreciated.
I'm using <ul class="nav nav-tabs">, wrapped within a container, and by design when the break point, marked by the end of the container is reached, it wraps around to a new line. How can I prevent this from happening so that everything stays inline and I can scroll horizontally instead?
Edit: Included code
<div class="jumbotron border">
<div class="row">
<div class="col">
<img src="image.jpg" alt="Placeholder for image">
</div>
</div>
<div class="row">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
Use flex-nowrap class for the list. Use d-flex also if the ul is not already flex,
Here you can see what it looks like right now.
What it looks like now
How do I get the nav to appear on the right side of the screen while making it be on the same line as the copyright? I cannot seem to get anything to work that I have seen on here so far.
Here is my current code:
<div class="container-fluid footer">
<div class="spacer"></div>
<div class="container">
<h5 style="display: inline">Copyright © 2017 Custom Prop Shop</h5>
<ul class="nav flex-column flex-sm-row justify-content-end pull-right">
<li class="nav-item">
<a class="nav-link" href="request-estimate.html">Request an Estimate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-work.html">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-clients.html">Our Clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-story.html">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<div class="spacer"></div>
</div>
CSS is only controlling color of the text/background and the font-size for this part.
I think the easiest way would be to make the container d-flex, and then use my-auto to vertically center the h5...
<div class="container d-flex justify-content-between">
<h5 class="my-auto">Copyright © 2017 Custom Prop Shop</h5>
<ul class="nav flex-column flex-sm-row">..</ul>
</div>
https://www.codeply.com/go/1WWhy3uP9C
You can use something like this
<div class="container-fluid footer">
<div class="spacer"></div>
<div class="container">
<div class="row">
<div class="col">
<h5 style="display: inline">Copyright © 2017 Custom Prop Shop</h5>
</div>
<div class="col">
<ul class="nav flex-column flex-sm-row justify-content-end pull-right">
<li class="nav-item">
<a class="nav-link" href="request-estimate.html">Request an Estimate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-work.html">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-clients.html">Our Clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-story.html">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="spacer"></div>
</div>
You can reference Bootstrap Grid Options over here https://v4-alpha.getbootstrap.com/layout/grid/#grid-options
add float: left on the h5.
or float: right on the ul