I'm ussing Bootstrap4.
I have a row with 2 col-md-6 (these make up to 12 cols for the row).
However, my left col has an extra margin that I don't need/want. You can see it in the following image as the purple margin.
How can I get rid of it?
html:
<header class="my_header_bg_color">
<br>
<br>
<div class="row margin_right_zero">
<div class="col-md-6">
<div class="my_custom_banner_left">
<p class="my_title_banner">Stickers<br>personalizados</p>
<p>Fáciles de ordenar por internet, diseño de conceptos gratis, envíos rápidos </p>
<div class="row">
<div class="col-md-6">
Comprar
</div>
<div class="col-md-6">
<a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 ml-auto">
<img src="{% static 'img/banner-home2.png' %}">
</div>
</div>
</header>
Update 1:
Apparently it goes all the way down to the footer.
As far as I know, Bootstrap automatically sets left and right margin for row and container elements to -15px. Using simple CSS and setting left and right margin for those elements to 0 should fix your problem. If you want pure HTML (no CSS) solution I'm not aware that it exists.
Related
I have a <div> with two columns. (I use two columns so I can left-align the left column and right-align the right column.)
<div class="section-header">
<div class="row">
<div class="col-md-6">
<img src="~/images/ttexpand.png" class="expand-handle" />
Dates and ETAs
</div>
<div class="col-md-6 text-right">
<img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
</div>
</div>
</div>
But one column can hold a lot more content than the other, and I'm not sure how much more. So I'd like the columns to resize if needed, giving more width to the column with more content.
To that end, I found the col-md-auto class.
<div class="section-header">
<div class="row">
<div class="col-md-auto">
<img src="~/images/ttexpand.png" class="expand-handle" />
Dates and ETAs
</div>
<div class="col-md-auto text-right">
<img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
</div>
</div>
</div>
This correctly gives more width the the column with more content. However, the two columns together no longer use up 100% of the width of the parent.
Is there any way to have the two columns together use up all available width but still give more width to columns with more content? Maybe similar to the way I can set the width of a table, but then the column widths are automatic?
Or, can use a combo between:
col-auto - who takes just the needed width
col - who takes the rest
Like this:
<div class="container-fluid">
<div class="row">
<div class="col border">
Takes all available width
</div>
<div class="col-auto border">
Takes just the needed width
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Hope this helps :D
Use this instead.
<div class="section-header">
<div class="d-flex justify-content-between">
<div>
<img src="~/images/ttexpand.png" class="expand-handle" />
Dates and ETAs
</div>
<div>
<img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
</div>
</div>
</div>
It will work for you.
i have two div columns in a row. i want the height of the left column to match that of the right column. In the first image is my desired state. But if the height of the right column changes, the height of the scrollable div should also be changed.
the reason is the height in px defined in the css, but i want to make that dynamical. how can i do that? Picture two shows my problem.
I would be glad about help :D
<div id="{{ project.RowKey }}" class="collapse" aria-labelledby="heading{{ project.RowKey }}">
<div class="card-body">
<div class="row">
<div class="col w-50 m-2">
<h6 class="row w-100">
Kommentare :
<div class="ml-2"><span
class="badge badge-pill badge-primary">{{ project.numberComments }}</span>
</div>
</h6>
<div class="row w-100">
<div class="w-100">
<!-- comments -->
<div class="" style="width:100%;height:200px;float:left;overflow-y:scroll;">
</div>
<!-- new comment -->
<form id="view_selection_form" action="{{ url_for('save_comment') }}"method="POST">
</form>
</div>
</div>
</div>
<!-- status -->
<div class="col w-50 m-2">
<h6>Details zum Status: </h6>
<div class="">
</div>
<div class="d-flex justify-content-end">Zuletzt geändert
von: {{ project.answers.last_changed_by.name }} |
{{ project.answers.last_changed_by.date }}
</div>
</div>
</div>
</div>
</div>
You can use display:flex; on the parent div and that makes the column divs to stretch till the parent div. Now restrict the height in parent div.
Check this example : https://codepen.io/AravinthAro/pen/ZEexPWv
So I'm using bootstrap to create an index home page
what I'm trying to do is basically align in the center 2 divs on top of each other :
I have a container-fluid
then a row with 2 cols: in 1 of the cols I have 2 divs that I want to be aligned in the center ( both horizontally and vertically ),
( code is shown below )
here's an illustration :
what I want to do
green is the container-fluid ||
red and blue are the divs I want to be aligned || an orange is a login form I want to add later on
my code goes like this :
<div class="container-fluid mainwrapper p-2">
<div class="row">
<div class="col">
<div>
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div>
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
</div>
<div class="col">
<!-- Login form here -->
</div>
</div>
</div>
here's a real picture of the problem
i want the green logo and the writing with the white background to be aligned in the center of the left column
real problem
what I realy want
Add text-center class to divs you want to align center. Shown in below code
<div class="col">
<div class="text-center">
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div class="text-center">
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
</div>
This will solve your problem..
add these steps:
HTML
<div class="text-center">
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
css
.col {
padding-left:50px;
}
you can just give "col-md-6" to with column and a "text-align:center;" (horizontal align), and "margin:0 auto". Try this.
<div class="container-fluid mainwrapper p-2">
<div class="row">
<div class="col-md-6" style="text-align:center;">
<div style="float: none; margin: 0 auto;">
<div>
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div>
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
<div>
</div>
<div class="col-md-6">
<!-- Login form here -->
</div>
</div>
</div>
I have the following html code to place an image next to div as in facebook comments:
<div className="row">
<div className="col-sm-1">
<img
className="img-thumbnail"
src="image.jpg" />
</div>
<div className="col-sm-11">
<div className="bg-light rounded p-1 pl-2">
<span className="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
However, this use of grid creates a space in the first div (col-sm-1) since the image size is smaller than the allotted width on the div. You can see the problem visually below. Any suggestions to mitigate this?
UPDATE
When using col-sm-auto, there is always a space left from the right because of col-sm-11, as you can see in the image:
You can use col-sm-auto instead of col-sm-1 which will shrink the column to the width of the content (the image). Also remove the left or right padding on the columns.
https://www.codeply.com/go/SLirjy4KDw
<div class="container">
<div class="row">
<div class="col-sm-auto pr-0">
<img class="img-thumbnail" src="//placehold.it/40">
</div>
<div class="col-sm-11 pl-0">
<div class="bg-light rounded p-1 pl-2">
<span class="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
</div>
You can use two div with d-inline as class. As these spaces will disappear
https://getbootstrap.com/docs/4.3/utilities/display/
So I have this code
<div class="row">
<a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
<img class="center-block" src="logo.png" />
</div>
It appears that the logo image is off-centered because it only takes the margin measurement after the button. How can I ensure that the button is aligned to the center?
You can put the button and the image in two different columns
Just like
<div class="row">
<div class="col-md-4">
//your button code
</div>
<div class="col-md-4">
//your image code
</div>
<div class="col-md-4">
//some other stuff
</div>
</div>
You could try a break in between like:
<div class="row">
<a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
<br/>
<img class="center-block" src="logo.png" />
</div>
After ensuring your image is positioned below your button, you should be able to follow the instructions in How to vertically align an image inside a div? if you need help aligning content inside a div.
I would break it up into 3 equal columns to make it easier.
Then you can use text-center:
<div class="row">
<div class="col-sm-4">
<a class="btn btn-primary">Back to Main Menu</a>
</div>
<div class="col-sm-4 text-center">
<img src="logo.png" />
</div>
<div class="col-sm-4"></div>
</div>