I'm using Bootstrap 4 to create a navigation header for my site. It's arranged like this:
I want it to be responsive when I shrink the browser size. I'm using col-4 for each of the three columns in the navbar.
Once it reaches a certain size, though, the 3rd (last) link drops onto a new line.
I have each element centered within its respective col-4 div, and I've set margin: 15% for the first two links. How do I keep all three links on the same line when I shrink the viewport?
Here's the HTML for the page:
<div class="container-fluid">
<nav class="navbar">
<div class="col-3 offset-1">
<form style="width: 90%">
<input class="form-control" type="text" placeholder="Search for someone..." aria-label="Search">
</form>
</div>
<div class="col-4">
<img class="mx-auto" src="logo.png">
</div>
<div class="col-4 nav-links">
MY FEED
HOT
<a id="last-nav-link" href="#">MY PROFILE</a>
</div>
</nav>
</div>
Set padding instead of margin for spacing them, and have all the col's add up to total columns and no more. Not sure how bootstrap is set up but it's the margin causing the wrapping/line-breaking you're seeing.
If the total column width is 12 and you have 4 columns they must equal 12 when added up.
As Jacob said, post your HTML for the Nav. Without seeing the HTML we can only guess.
Related
I am kind of new in web design and I am having issues to properly resize images with the class img-fluid in a certain view where they act as some kind of thumbnails inside a portfolio-item. I am going to upload a couple of images to explain what I am trying to achieve. The first image is what I am trying to do, around 3-4 items per row with the same size , the problem is that when I show one image that is vertically bigger than horizontally it also gets bigger resolution than the other images , messing my row entirely and adding some empty spaces
This second image ilustrates the problem, 2 is the image that is bigger in height and it messes the other elements depending on the position that image gets placed.
Here is the HTML code :
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-2">
<!-- Portfolio item -->
<div class="portfolio-item">
<a class="portfolio-link" href="someurl">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="sourceofimage" alt="default" height=auto/>
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">some text</div>
<div class="portfolio-caption-subheading text-muted">some text</div>
</div>
</div>
</div>
</div>
</div>
And CSS of img-fluid
.img-fluid {
max-width: 100%;
height: auto;
}
Can anyone help me with this ?
Use both height and width. Set the width to how ever many pixels or any other increment you would like, and the same for the height.
The code: https://codepen.io/flvffywvffy/pen/OJjoeKP (ignore the javascript)
see the home icon in 1st col over logo image. I want icon in the last col
I have added logo image in col-md-11 and home icon in col-md-1. but home icon is getting overlapped with the first col of col md-11.
<div class="container-fluid logo-section">
<div class="container">
<div class="row">
<div class="col-md-11"><!--for logo img-->
<img src="images/logo.png" class="img-responsive" />
</div>
<div class="col-md-1 home-icon"><!--for home icon-->
<span class="glyphicon glyphicon-home"></span>
</div>
</div>
</div>
</div><!--Logo section ends-->
The usual cause of that scenario is that the contents of one of your columns are wider than the column. This forces that column to be wider than the width specified by Bootstrap which breaks the Bootstrap column layout - causing the line break you are seeing.
The easiest way to resolve this is to remove the contents of all columns and then put them back one at a time. You will quickly see which column has content that is causing the problem.
On this project I'm working on, the user has the ability to decide which widgets (logo, search, sign in, cart button) are placed on this header up to a limit of 12 columns. They can decide how many columns each widget will take.
On this scenario, I have a widget that takes 2 bootstrap columns, but the entire content cannot fit inside.
I must have the whitespace set to 'nowrap', which is making the content overflowing to the next column.
I would like to know if it's possible in CSS and how can I force the content of this column to expand and adapt to it's width when there's no room (maintaining the white-space set to 'nowrap').
Below is a simplified version of the HTML used (that still produces the problem I'm trying to fix)
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2">
<a class="logo" href="#" style=""><img src="logo.png" alt="Logo"></a>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<input type="text" class="form-control" placeholder="Search All Categories">
</div>
<div class="col-md-2 col-sm-2 col-xs-2 text-nowrap">
<a><span>Hi, Sign In<br><strong>Your Account</strong></span></a>
<a><span>Quick Order</span> <i class="fa fa-bolt"></i></a>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<div class="cart-btn">
</div>
</div>
</div>
</div>
The CSS for the cart button
.cart-btn {
width: 120px;
height: 40px;
display: inline-block;
background-color: #292c2e;
margin-left: 10px;
}
A sample on JSFiddle reproducing this issue
http://jsfiddle.net/scottx/mA6Za/438/
The idea is to allow the user to add these widgets to the header and make sure that all will load as supposed and prevent them from 'breaking' regardless of what widgets were added and how many columns they decide to assign for each one. So in this scenario, a user added the widget 'logo' taking 2 columns, the widget 'search' taking 6 columns, the widget 'various' which contains the sign in button, favorites, etc and is taking 2 columns, and the widget 'cart' also taking 2 columns. The problem I'm facing here is that the widget 'various' on smaller screens is too large to fit in 2 columns only.
Probably what I'm trying to achieve is not possible in a way that if we're taking more space than assigned to a column, other column will have to lose space and I guess the browser doesn't know which one will be.
I think this can be fixed with JS but I'd like to know if anyone might have a solution with CSS only.
Thank you so much!
I would go with:
div.row > div > * {
max-width: 100%;
}
This css will force all elements inside cols to take max. 100% width of parent
I don't know what exactly you want to achieve in there but we can make text to stop overflow container with
.text-nowrap {
white-space:initial;
}
Update JSFiddle
Here is my Bootstrap 3 jsFiddle, although you'll likely need to view it in full screen view in order to see it in all its glory.
As you can see, there are two TB3 "wells" called Herps and Derps. They are currently sitting on top of one another, and furthermore, they are wider than the navbar, jumbotron and footer wells.
I'd like these to both be next to each other on the same line/"row", and I'd like the two wells to be the same width of all the other contents. I'd also like to have a bit of padding (spacing) between the two wells so that they're not smushed right up next to each other.
My best attempt (from that jsFiddle above):
<div class="row">
<div class="span6">
<div class="well">Herps</div>
</div>
<div class="span6">
<div class="well">Derps</div>
</div>
</div>
...does not seem to be doing the trick. Any ideas where I'm going awry?
You need to use the col-x-y css styles for your wells for the appropriate screen size and columns. In this case, you could use col-sm-6 since you have two columns.
<div class="row">
<div class="col-sm-6">
<div class="well">Herps</div>
</div>
<div class="col-sm-6">
<div class="well">Derps</div>
</div>
</div>
JSFiddle
Bootstrap Grid System
I'm trying to set up a two-column layout - The left column is a list of items and the 2nd column is the details about an item in the first column (click on the item and the data renders, but that's not important right now).
I'm getting stuck setting up the layout - I can get the columns going, but when I add the list into the first column, it's rendering below it. And I'm not sure why.
Can someone point me in the right direction?
<body>
<div id="content">
<div class="row">
<div id="sidebar" class="col-md-4">
<div class="list-group">
<a class="list-group-item">Item Here</a>
<a class="list-group-item">Item Here</a>
</div>
</div>
<div id="main" class="col-md-8">
Other Stuff Here
</div>
</div>
</div>
</body>
I've tried removing the parent div (id="sidebar") and making that ID/width part of the list-group div, but then id="main" renders above the list.
So, I'm confused. What am I missing?
if you use col-md, your div have 100% width when your browser width is below < 768px, it's a behavior on mobile first css grid, so change col-md by col-xs for have your result for any device size