What is the best way to adjust the sizing and alignment of bootstrap columns?

I'm facing some issues with my 4-column layout. The first column isn't aligning properly and is centered along with the other 3 columns. Also, I would like the columns to start higher up on the page.

Another problem is that these columns extend beyond the canvas on both sides. I want them to have margins on the left and right of the canvas. Can anyone assist me in resolving these issues? Thank you in advance!

Check out the site here:

Here's the desired look: https://drive.google.com/file/d/1V3lFJk0NVuJ8yC_-s-yqs0HlZZSJwKYD/view?usp=sharing

<div class="row">
      <div class="col-3">
        <div class="card" id="filter">
                <header class="card-header">
                    <h6 class="title">Filter</h6>
                </header>
            <div class="card-body">
              <h5>Categories</h5>
              <div class="form-group">
                <select class="form-control" id="exampleFormControlSelect1">
                  <option hidden="">Select a category</option>
                  <option>Administration</option>
                  <option>Charity &amp; Voluntary</option>
                  <option>Construction</option>
                  <option>Education</option>
                  <option>Finance</option>
                  <option>Health</option>
                  <option>IT &amp; Telecoms</option>
                  <option>Media, Digital &amp; Creative</option>
                  <option>Retail</option>
                  <option>Security &amp; Safety</option>
                  <option>Training</option>
                  <option>Other</option>
                </select>
              </div><br>
              <h5>Location</h5>
              <div class="form-group">
                <input class="form-control" type="text">
              </div><br>
              <h5>Distance</h5>
              <div class="slidecontainer">
                <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
                <p><span id="demo">50</span> kms</p>
              </div><br>
              <h5>Budget</h5>
              <div class="form-group">
                <input type="text" id="name" name="name" requiredminlength="4" maxlength="8" size="5">
                <p>to</p>
                <input type="text" id="name" name="name" requiredminlength="4" maxlength="8" size="5">
              </div><br>
              <h5>Date</h5>
              <div class="form-group">
                <select class="form-control" id="exampleFormControlSelect1">
                  <option hidden="">Select a date</option>
                  <option>Last 24hrs</option>
                  <option>Last week</option>
                  <option>Last month</option>
                  <option>Last 3 months</option>
                  <option>Last 6 months</option>
                  <option>Last year</option>
                  <option>Forever</option>
                </select>
              </div>
            </div>
         </div>  <!-- card-body.// -->
      </div> <!-- card.// -->
      <div class="col-9"> <!---New post--->
        <div class="card-columns" id="cards">
           <!-- Card content goes here -->
         </div>
      </div> <!---New post end--->
    </div>
htmlcsslayoutbootstrap-4

Answer №1

The styles.css file includes the rule .row {align-items:center}, which is currently overriding the default align-items:start. To resolve this issue, either remove the rule from styles.css or utilize the Bootstrap align-items-start class within the row element.

In addition, ensure that the row is enclosed within a container or container-fluid.

Check out the demo here: https://www.codeply.com/go/hYW1lMbM71

Answer №2

We have encountered an issue in this code block.

<h5 class"card-title"="">Steven Arroyave</h5>
<p class"card-text"="">Plymouth, UK</p>

<h5 class"card-title"="">Alejandro Morales</h5>
<p class"card-text"="">Plymouth, UK</p>

It seems that the correct format should be as follows:

<h5 class = "card-title">Alejandro Morales</h5>
<p class = "card-text">Plymouth, UK</p>

A similar structural issue is present in all card title classes. It's intriguing why this was not highlighted by previous responses.

I also believe that @zim's answer effectively addressed the problem. If you disagree, please leave a comment so I can further investigate.

Answer №3

<div class="container">
    <div class="row">
        <div class="col-3">insert card content here</div>
        <div class="col-3">insert card content here</div>
        <div class="col-3">insert card content here</div>
        <div class="col-3">insert card content here</div>
    </div>
</div>

Answer №4

  1. For vertical alignment, apply .align-items-start to the .row class (learn more on Bootstrap 4 documentation)
  2. Consider using .container or .container-fluid for layout

<div class="container">
 <div class="row align-items-start">
  <div class="col-3">insert card content here</div>
  <div class="col-3">insert card content here</div>
  <div class="col-3">insert card content here</div>
  <div class="col-3">insert card content here</div>
 </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can I use to keep content visible when a Fixed-Header is in place?

I have created a never-ending page, where more content is loaded at the bottom when the user scrolls to the end. Specifically, I am loading blog posts. This part of the project is complete. However... My boss has asked me to add a sliding feature that sho ...

javascriptjqueryhtmlcss

Run a PHP script on the current page upon choosing an option from a dropdown list with the help of Ajax or JavaScript

I'm currently working on a MySQL query that needs to be executed when a user selects options from multiple dropdown lists. What I am looking for is the ability to automatically run a query related to the selected dropdown list option using AJAX/JavaS ...

phpjavascriptmysqlhtmlajax

Issues arise when attempting to use bootstrap in col-md-6 format on a tablet, as the

I attempted to have 2 columns appear side by side on tablets by using col-md-6 so that each column would only use 6 units. However, when switching from desktop to tablet size, the columns end up stacked vertically, with each column now using all 12 units ...

htmlcssbootstrap-5

Tips for updating the search textbox placeholder in a multiselect feature

Is it possible to modify the placeholder of the search textbox in the multiselect? I am referring to the textarea that allows you to search for an item by name. (see attached image) It is located below the selected elements. https://i.sstatic.net/fYuVz.pn ...

jqueryhtmlcsskendo-uiplaceholder

Issues arise when attempting to switch to a different tab other than ngbTabet

I have a situation where I am using ngbtabet (bootstrap 4.0) to create tabs for both signin and login. Currently, the first tab loads by default but when I try to click on the second tab, it does not load. Can anyone point out what might be missing in thi ...

htmlangularbootstrap-4angular-ui-bootstrap

Having trouble getting a dropdown menu to function properly with jQuery

Within my project, I have implemented a menu that transforms into a dropdown menu for smaller screens. Below is the HTML code for this functionality: <select> <option value="index.php" id="home">Home</option> <option value="about ...

phpjqueryhtml

Switching between Angular components with a button press

I'm looking to switch from one Angular component to another when a button is clicked. Specifically, I have two components: app and login. Upon clicking a button in `app.component.html`, I want to navigate to `login.component.html`. Here's what I& ...

htmlangularbootstrap-4

Mastering @media queries to dynamically alter widths in prop styled components

I have a unique component that utilizes an object with its props for styling. const CustomSection = ({ sectionDescription, }) => { return ( <Text {...sectionDescription} content={intl.formatMessage({ id: &apos ...

cssreactjs

Adjusting the height of a div inside a Material-UI Grid using Styled Components

When the mouse hovers over the two cells highlighted in pink, they turn pink. Is there a way to make the entire grid fill with pink when hovered over, both width and height at 100%? Check out the sandbox here ...

cssmaterial-uistyled-components

What is the best way to make a button stretch across the entire width of the footer on a mobile device screen?

I'm attempting to make a button located in the right rail column on my test page (in desktop view) expand to fill the entire footer of the page in mobile view. Below is the CSS and JavaScript code I am currently using: @media screen and (max-width: ...

javascripthtmlcss

Retrieve the ID from the database and showcase the content on a separate page

My database has a table named "apartments," and I am using the following code to display its contents on a single page: $connect = mysqli_connect("localhost","root","","db_dice"); $query = "SELECT * FROM apartment ORDER BY ID DESC"; $records = mysqli_quer ...

phphtmlmysqldatabasepermalinks

Develop a responsive component on the right side

I am encountering an issue with creating a responsive div that matches the height of the image on the left side. I want to include text in this div, however, when I do so, the paragraph expands in height along with the div element when I attempt to change ...

htmlcss

Navigating to the MasterPage body from a different page: What steps to take

Currently, I am working on a log-in page that includes a drop-down list allowing users to choose a background color for the website. However, I am facing challenges in connecting the body of the master page with the selected value from the drop-down list. ...

htmlcssasp.net

Guide on implementing a looping settimeout function on a sliding page to dynamically load an HTML template within the Framework 7 framework

My current setup involves using Framework7 (framework7.io). The code below functions correctly on the main view page, utilizing a looping settimeout to refresh signups.html every second: <script type=“text/javascript” src=“code.jquery.com/jquery- ...

javascriptjqueryhtmlhtml-framework-7

Is there a way to position the table to the right of the registration text boxes?

https://i.sstatic.net/Fh9Bk.jpg Is it possible to position the table using <div> elements? ...

htmlcssformshtml-tablealignment

Executing a function when a webpage loads in Javascript

I have created a responsive website using Twitter Bootstrap. On my site, I have a video displayed in a modal that automatically plays when a button is clicked. Instead of triggering the function with a button click, I want the function to be called when ...

javascripthtml

Is there a way to implement CSS transitions when hiding elements?

My bootstrap navbar collapses and displays items outside of it. However, when I hide the menu, the overlay div disappears immediately and does not transition smoothly with the menu. How can I apply a transition to the div when hiding the menu? I've t ...

cssreactjsbootstrap-4

Convert a decimal number to a suitable Alpha value for an RGBA CSS color

I'm currently working on filling a Canvas element with a linear gradient that transitions from White to a dynamic color that will be determined at runtime. In order to achieve this, I have written a function that takes a floating-point number as its ...

javascripthtmlcsscanvas

Experiencing a problem when trying to load pages using AngularJS routing

Feeling puzzled. My code seems fine, and it successfully loads the list-patents.htm template by default, but when I click on the corresponding anchor tag to load the add-patents template, nothing happens. The URL displays like this: http://localhost/#!/#l ...

javascripthtmlangularroutes

Streamlining Tailwind CSS styles in your React/Next.js components for maximum efficiency

Since implementing Tailwind CSS in my React/Next.js project, I've noticed a decrease in maintainability compared to using traditional CSS or styled-components. Previously, I could easily consolidate style changes, but now I find myself duplicating cla ...

cssreactjsnext.jstailwind-css