This question already has answers here:
Bootstrap 4 correct way to use row and col classes [duplicate]
(1 answer)
Bootstrap - do we have to use rows and columns?
(2 answers)
Closed 4 years ago.
I'm writing a page in html using Bootstrap 4.2. I would like to have a horizontal navigation bar at the top of the page, that occupies the whole width of the page, and remains static during navigation.
I tried to use a few divs with the class "container-fluid". The problem is that a margin appears on the left and right side of the bar
Here is an example of what I get in jsfiddle
<div class="container-fluid">
<div class="sticky-top shadow" id="containerMain">
<div class="container-fluid bg-secondary text-light p-1">
<div class="row align-items-center ">
Line number one content here
</div>
</div>
<div class="container-fluid filters bg-light align-items-center">
<div class="row p-1">
Line number two content here
</div>
</div>
</div>
</div>
Does anyone know how to make these unwanted margins disappear? I tried without the "container-fluid" class, but then the margin appears on the right side, with a horizontal scroll that I don't want either.
Thank you very much in advance,
container-fluid has padding-left and padding-right of 15px which is the gap you're seeing. You could overwrite it by adding the class px-0 which is padding of 0 for left and right. And you would then have to overwrite the 15px margins of the row with a mx-0 class.
But if it's a nav that you want, then what you should be using is the nav component of Bootstrap: https://getbootstrap.com/docs/4.1/components/navbar/
Not sure if this is what you're looking for:
Here's the jFiddle
<nav class="fixed-top navbar-light bg-light m-0 p-0">
<div class="container-fluid">
<div class="row text-center text-light bg-secondary p-1">
<div class="col">
Line number 1 content here
</div>
</div>
<div class="row text-center text-secondary bg-light p-1">
<div class="col">
Line number 2 content here
</div>
</div>
</div>
</nav>
I think the bootstrap "row" class adds some margin (15px).
Maybe you can add an own class to make margin: 0. Or delete the row class
I wish that helped!
Thank you.
Related
I'm trying to create a div that takes up 8 columns, centered, in a large viewport, and takes up all 12 columns, centered, in all other viewports.
I tried to achieve this with justify-content-center, but for some reason it is not centering the content on small viewports:
Large viewports: content is centered as expected:
Small viewports: content is off-center slightly:
Here is the code:
<div class="row container-fluid justify-content-center">
<div class="main-container p-3 m-3 col-lg-8">
(text)
</div>
</div>
I was able to achieve the desired effect with the following:
<div class="container-fluid">
<div class="row justify-content-center p-3">
<div class="main-container p-3 col-lg-8">
(text)
</div>
</div>
</div>
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 1 year ago.
I have three elements and I want to center two in the middle of the page and the last item completely to the left.
I still don't understand the col system.
Thanks in advance.
html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container w-100">
<div class="row">
<div class="col d-flex justify-content-start">
item 1 // align this element to the left
</div>
<div class="col">
item 2 // center this element in the middle of the page
</div>
<div class="col">
item 3 // center this element in the middle of the page
</div>
</div>
</div>
To accomplish what you are looking for we need to create a row that contains 3 columns with the same width and leave the third column empty. Then we use Bootstrap d-flex class to position the elements inside each column exactly where we want.
In this case I'm using justify-content-start to position the flex element at the start (left) of the container.
.m-1{border:1px solid black}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row w-100">
<div class="col">
<div class="d-flex justify-content-start">
<div class="m-1 p-1"> item one</div>
</div>
</div>
<div class="col">
<div class="d-flex justify-content-center">
<div class="flex-fill m-1 p-1">item two</div>
<div class="flex-fill m-1 p-1">item three</div>
</div>
</div>
<div class="col">
</div>
</div>
You can read more about this here and here
I'm very new to Bootstrap and have been working through some tutorials. I'm currently trying to rebuild Google's homepage and have run into some difficulty with the responsiveness of the grid system.
I've created a very basic layout of the top bar on Google's homepage and it more or less looks fine as it is fullscreen; however, when I resize the window, the text on the right hand side spills over the width of the window.
<body>
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-1 justify-content-start aboutlink">
About
</div>
<div class="col-1 justify-content-start">
Store
</div>
<div class="col-8">
</div>
<div class="col-1 justify-content-end gmaillink">
Gmail
</div>
<div class="col-1 justify-content-end">
Images
</div>
</div>
</div>
Here's an image of the issue:
The classes "aboutlink" and "gmaillink" are simply aligning the text to the right and the topbar id has a 15px margin and sets the font size.
I've had a read through the responsive breakpoints and grid system documentation, but can't seem to fix this issue. Would be grateful if anyone could share some advice?
Thank you.
What is going wrong?
If we add a border to the columns and allow the word to wrap if it doesn't fit, we can see better what is happening.
Take a look at this example, and you will see that on smaller screens the words are not fitting into the col-1 divs, and because words don't wrap by default it is causing the col to grow bigger than it should be to accommodate the size of the text:
.col-1 {
overflow-wrap: break-word; border: 1px solid lightgray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-1 aboutlink">
About
</div>
<div class="col-1">
Store
</div>
<div class="col-8">
</div>
<div class="col-1 gmaillink">
Gmail
</div>
<div class="col-1">
Images
</div>
</div>
</div>
1. Breakpoints and padding classes
Bootstrap's grid classes to allow you to set the breakpoints for the cols. So for example these classes mean: give the column 6/12 of the space on screens up to the md breakpoint (768px), and 8/12 of the space from 768px and up:
<div class="col-6 col-md-8">
Bootstrap also has spacing classes that can be used to change the padding of the columns. The px-* classes set the padding for the left and right padding. The default is px-3, so we can use px-1 to make the padding smaller and so the same size columns can fit in more content.
Example using col-sm-* and px-*:
.row div {border:1px solid lightgray;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-2 col-sm-1 aboutlink px-1">
About
</div>
<div class="col-2 col-sm-1 px-1">
Store
</div>
<div class="col-4 col-sm-8">
</div>
<div class="col-2 col-sm-1 gmaillink px-1">
Gmail
</div>
<div class="col-2 col-sm-1 px-1">
Images
</div>
</div>
</div>
2. Bootstrap Auto classes
A better option in this case (as you don't need a defined structure) might be to use the col-auto Bootstrap classes that will use only the space needed to fit the content - this can overcome the problem of having to set the cols to a specific proportion of the width, such as 1/12 or 2/12.
In the example below, we set the width of the first 2 and last 2 columns to col-auto so they will resize to fit the text inside them, and then give the middle column the col class to take the rest of the available space:
.col-auto{ border:1px solid lightgray;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-auto aboutlink px-1">
Abouttttt
</div>
<div class="col-auto px-1">
Store
</div>
<div class="col">
</div>
<div class="col-auto gmaillink px-1">
Gmail
</div>
<div class="col-auto px-1">
Images
</div>
</div>
</div>
FYI: the justify-content-* classes are for flexbox layouts & don't work with the grid classes, so I have removed them from the examples.
I am trying to create a horizontal list of cards where 3 cards are shown at a time and the other ones are horizontally scrollable, like this:
This can be done with CSS pretty easily, but I want to do this using Bootstrap. Bootstrap 4 ships with cards as popularized by material design and they are as easy to use as anything else in Bootstrap. For this example instead of cards it could also be regular divs.
The thing I am struggling with is creating a scrollable container of X cards (or divs) where 3 of them are shown at a time and the others overflow to the right and are scrollable. I am not sure how to use Bootstrap give the cards (or divs) a width so that 3 are shown at a time and the other ones lie next to them on the right.
Update 2021 Bootstrap 5
The flexbox utils still exist in Bootstrap 5: https://codeply.com/p/Vo13PAGO7e
<div class="container-fluid py-2">
<h2 class="font-weight-light">Bootstrap 5 Horizontal Scrolling Cards with Flexbox</h2>
<div class="d-flex flex-row flex-nowrap">
<div class="card card-body">Card</div>
<div class="card card-body">Card</div>
<div class="card card-body">Card</div>
...
</div>
</div>
Update 2019 Bootstrap 4.3+
The flexbox method still works, so you can use the flexbox utils in the container of the cards: https://codeply.com/go/PF4APyGj7F
Original Answer Bootstrap 4 alpha
Now that Bootstrap 4 Alpha 6 uses flexbox, this horizontal scrolling layout is much easier. You can simply use flex-row and flex-nowrap:
<div class="container-fluid">
<div class="row flex-row flex-nowrap">
<div class="col-3">
<div class="card card-block">Card</div>
</div>
<div class="col-3">
<div class="card card-block">Card</div>
</div>
<div class="col-3">
<div class="card card-block">Card</div>
</div>
<div class="col-3">
<div class="card card-block">Card</div>
</div>
...
</div>
</div>
https://codeply.com/go/GoFQqQAFhN
The most effective solution would be as shown below. Alongside the flex-nowrap you need to set the overflow attribute to prevent the whole page expanding.
With overflow property:
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>
Without overflow property:
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>
You can use bootstrap-horizon
Installation
Include bootstrap-horizon.css after bootstrap.css
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap-horizon/bootstrap-horizon.css">
Add the .row-horizon class to .rows that require horizontal scrolling. In order to improve the UX, bootstrap-horizon overrides bootstrap's .col-*-* classes to make the baseline width 90% instead of 100% which allows for a small portion of the last column to be displayed.
<div class="row row-horizon">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
...
</div>
</div>
Example
Bootstap 4.3
Scss file
.card-deck-scrollable{
#extend .card-deck;
flex-direction: row;
& > .card{
#extend .mx-3;
flex: 0 0 40% !important;/*Change to any size you want*/
max-width: 40%;
}
}
html file
<div class="card-deck-scrollable flex-nowrap overflow-auto">
<div class="card">
<div class="card-body">
<div class="card-title">Name</div>
</div>
</div>
</div>
Since you are implementing a horizontal scroll I am sure that all the cards have to be the same for all the cards thus #extend .card-deck; this will ensure all the cards are the same height.
To add to #ikonuk's answer, if you have a layout using columns and would like to add a horizontally scrollable list of cards in a column where each card has a minimum length, you might find that the 'container' column breaks out of the grid system when you resize your browser window by dragging, when you use
style: min-width: 300px // (or any other value in pixels)
to set the minimum width of the cards.
In order to nòt let the columns break, simply use a percentage value for the minimum width of each card, or use bootstrap's w-xx classes to set the percentage for each card.
(this may also hold for bootstrap 5, but haven't tested it yet since stumbled upon this currently in a project that's using bootstrap 4)
I have two bootstrap containers, one inside header navbar of the page, the second below navbar. Inside each container there is some text. I want text that is in the navbar container to be shifted to the left by 15 px for all responsive breakpoints.
I tried to do this using a negative margin. Here is my code:
<nav class="navbar px-0 navbar-light fixed-top bg-primary">
<div class="container"><div style="margin-left: -15px;">Text1</div></div>
</nav>
<div class="container" style="margin-top: 50px;">Text 2</div>
and JSFiddle example.
This method works, but it has a serious bug. When the width of the browser decreases, text in header navbar starts to go beyond the screen. Is there any way to avoid this? Of course it is clear that I set up margin using #media, but I think this is not quite the right way.
If you use the right way of nesting elements in Bootstrap you will end up with an aligned left side: .row will give you -15px to the left to counter the 15px left padding on .col-xx-xx. What you could do is to add 15px padding to other containers and let the navbar keep the normal bootstrap container max-width... That will keep the default 15px padding on the navbar on mobile/tablet etc.
<nav class="navbar px-0 navbar-light fixed-top bg-primary">
<div class="container">
<div class="row">
<div class="col-sm-12">Text</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-inner">Text</div>
</div>
</div>
</div>
Codepen Example
You can use navbar-fixed-top instead of fixed-top for navbar section. In Bootstrap 4 adjust margin-left by using default css class ml-1,ml-2,.. and padding pl-1,pl-2 as follows.
Ref Bootstrap 4 spacing
<nav class="navbar navbar-default navbar-fixed-top bg-primary">
<div class="container">
Text 1
</div>
</nav>
<div class="container">
<div class="ml-4 mr-4">
<p>Text 2</p>
</div>
</div>
Try your ans here: https://jsfiddle.net/testdesigner/aq9Laaew/193572/