Having trouble getting items to align properly in Bootstrap

As a student, I am struggling with my development skills while attempting to create a personal website. I am encountering difficulty aligning items on my rows in bootstrap. Here is what I am trying to accomplish: 1. However, I am currently stuck at this point:

<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col">
      <div class="title">
        Lorem Ipsum —<br>Interactive Media<br>Designer
      </div>
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      <ul class="link">
        <li>About</li>
        <li>Work</li>
        <li>Experiments</li>
        <li>Contact</li>
        <li>Instagram</li>
        <li>Behance</li>
      </ul>
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      <div class="footer">
        All rights reserved© 1998—2019
      </div>
    </div>
  </div>
</div>

Seeking assistance, as the alignment of items is not as desired. Can anyone provide guidance?

htmlcsstwitter-bootstrap

Answer №1

To achieve the desired layout, each element must be placed in a single row. In your case, you have 3 rows to work with.

Visualize each row like this:

Each line represents a single row. Placing content within one row element will display it in a single line; spreading the content across multiple rows will display it accordingly.

Your code structure should resemble the following:

<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col">
      <div class="title">
        Lorem Ipsum —<br>Interactive Media<br>Designer
      </div>
    </div>
    <div class="col">
      <ul class="link">
        <li>About</li>
        <li>Work</li>
        <li>Experiments</li>
        <li>Contact</li>
        <li>Instagram</li>
        <li>Behance</li>
      </ul>
    </div>
    <div class="col">
      <div class="footer">
        All rights reserved© 1998—2019
      </div>
    </div>
  </div>
</div>

If this solution does not address your issue, feel free to return for further assistance.

UPDATE

Based on new information provided, an updated solution would look like this:

<div class="container-fluid top">
  <div class="row align-items-start">
    <div class="col">
      <div class="title">
        Lorem Ipsum —<br>Interactive Media<br>Designer
      </div>
    </div>
  </div>
</div>
<div class="container-fluid center">
  <div class="row align-items-center">
    <div class="col">
      <ul class="link">
        <li>About</li>
        <li>Work</li>
        <li>Experiments</li>
        <li>Contact</li>
        <li>Instagram</li>
        <li>Behance</li>
      </ul>
    </div>
  </div>
</div>
<div class="container-fluid bottom">
  <div class="row align-items-end">
    <div class="col">
      <div class="footer">
        All rights reserved© 1998—2019
      </div>
    </div>
  </div>
</div>

.top {
  position: aboslute;
  top: 0;
}

.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bottom {
  position: absolute;
  bottom: 0;
}

Answer №2

The align-items attribute is influenced by the height of the row. It is important to correctly set the height for the row in order to control alignment.

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

Tips on incorporating background color into HTML emails dispatched via PHP mail()

Struggling to add a background color to my HTML email. I've attempted various methods: Inserting <script> tags with CSS code inside Adding bgcolor in body tags Using a CSS style sheet All to no avail. I suspect it could be the email provi ...

phphtmlcsshtml-emailemail

What considerations should I keep in mind when changing the DOCTYPE from html 4.01 transitional to 'html'?

Firefox is telling me that my pages are being rendered in 'standards compliance mode' based on the doctype... <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> After changing it to < ...

htmlcss

The content displayed in the PrimeNG p-table is limited to only the table name with no additional information

After upgrading Angular to version 9, I switched from p-dataTable to p-table in PrimeNG. With a table named users, I intended to display them on the screen upon rendering the view using the following HTML: users = ['one','two','thr ...

htmlangularprimeng

Eliminate empty space in the table cell

I am working with a table that looks like this: <table> ... <td> <div class="btn-group btn-group-sm"> <button class="btn btn-info mini"><span class="glyphicon glyphicon-duplicate"></span></button&g ...

htmlcsstwitter-bootstrap-3css-tables

What are some ways to adjust the size of the option field in a select menu?

In my ionic popup, I have a HTML property called select with nested options. Below is the code snippet along with the applied CSS. My query is how can I set the white space to occupy the entire area of the select? https://i.stack.imgur.com/iPqAa.png http ...

javascripthtmlcss

Is there a method to implement a pop-in animated contact form without the use of Javascript or query selectors?

Although I was successful in creating a contact form with this functionality using Javascript, I encountered some difficulties when attempting to achieve the same result without it. My goal is for the form to slide in from the right when the "open" icon is ...

javascripthtmlcssformsanimation

Is it possible to manipulate elements within an overflow container using JavaScript/jQuery when using the HTML style "overflow:hidden"?

My <div> has a styling of style="overflow:hidden" and the size of the <body> is fixed, intended as a multi-screen display without a user interface. Is there a method to access these "invisible" elements to identify the first one that exceeds t ...

javascriptjqueryhtmlcss

Gauging Screen Size: A Comparison between Media Queries and JavaScript for Adjusting Div Position

I am currently facing an issue with the banner on my website. It contains a slider and has a position set to absolute. The problem arises when viewing it on smaller screens, as only the left side of the wide banner is visible. Initially, I tried using med ...

javascriptcssmobilescreen

Exploring the different ways to compare data with the load() method

I am faced with a coding dilemma. I have two pages: data.php and index.html. The data.php page contains a single value (let's say 99), while the index.html page uses jQuery to dynamically load the data from data.php into a div called "data" every 2 se ...

jqueryhtmlcolorsload

Creating visuals from written content

I am attempting to transform Y[0] into an image rather than text. Currently, it is only displayed as a plain text link and not as an image. <html> <head> <script type="text/javascript"> function modifyContent(){ var rows=document.g ...

javascripthtml

Incapable of modifying the text within a div container

I am currently working on a script that translates a Russian forum word by word using TreeWalker. However, there is a specific type of div element that I have been unable to change the text for. That leads to my question: How can I go about changing it? Un ...

javascriptjqueryhtmlajaxgreasemonkey

Transform the image background on mouse hover using CSS

On my php page, I am dynamically visualizing thumbnails. To ensure that they are all the same size, I use the following method: <a class="zoom" href="..."> <img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $ ...

css

Adjusting the height of a CSS div to be 0 while also modifying the

I have encountered a unique dilemma <div class="parent"> <p>stuff stuff stuff</p> </div> Using CSS, I set the width and height of parent = 0; because I intend to modify it when a button is clicked. However, for this purpose, I ...

css

"Clicking on the 'View More' button within a foreach loop is only functional for the

I am trying to iterate through a list of items using a foreach loop, and each item has a "view more" option. The intention is that when I click on this option, it should expand to show more details about the respective item. However, I am encountering an i ...

htmlasp.net-mvc

Pass the JavaScript variable and redirect swiftly

One of the functionalities I am working on for my website involves allowing users to submit a single piece of information, such as their name. Once they input their name, it is sent to the server via a post request, and in return, a unique URL is generated ...

javascripthtmlexpressredirectweb

An alternative to Beautiful Soup for Python 3.2

Looking to create a web crawler for extracting information from various web pages, I discovered Beautiful Soup which seemed like an excellent tool. It allows me to parse entire documents, create dom objects, iterate through them, and extract attributes sim ...

pythonhtmlweb-crawler

Combining two containers in CSS

I am currently working on building a website design, and I have a menu positioned on the right side of the layout. Below is the code for the menu along with an explanation. #rightmenu { border-top: 1px solid #000000; border-right: 1px solid #00000 ...

csspositionpositioninghtml

Loading HTML dynamically

Currently, I am working with node.js, express, and handlebars. When passing JSON data via res.render() to handlebars (hbs), I use {{#each dataJson}} to loop through the data and display it. However, if my JSON file had a large number of entries, loading t ...

htmlnode.jsjsonexpresshandlebars.js

What are the steps to troubleshoot CSS issues in NextJS?

Currently, I am encountering challenges while trying to integrate markdown with CSS. The problem I am facing has been replicated in the link provided: https://codesandbox.io/s/react-quilljsbasic-forked-3rcxw?file=/src/App.js ...

cssreactjsmarkdownnext.js

Asking for information regarding RESTful API

Could you please assist me in identifying the most suitable technologies for integrating a RESTful API into an HTML and CSS website? The primary objective is to enable the website owner to easily log in and add news entries about their business. Addition ...

javascripthtmlreactjs