Struggling to create a basic website design using Flex within Bootstrap 5

As a newcomer to Bootstrap and web development, I am eager to create a simple welcome-page with a specific design in mind. The layout should resemble the image found https://i.sstatic.net/AAEQ4.png.

The colors in the image indicate where flex rows could be placed. The second row needs to have a defined height, while the first row should fill the remaining space. Additionally, I want the middle text to be centered both vertically and horizontally, and the text in the bottom right corner to be centered to the right.

Despite reading the comprehensive documentation on flex in Bootstrap 5, I am finding it challenging to implement all the possible configurations. Any assistance would be greatly appreciated.

htmlcssflexboxbootstrap-5

Answer №1

  1. Ensure the body is at least as high as the viewport by adding min-vh-100 to the body.
  2. Add Flexbox to the body by including d-flex.
  3. To stack elements below each other within a Flexbox, also add flex-column to change the default flex-direction from row to column.
  4. To fill all remaining height of a flex-item within a flex-container, add flex-grow-1 to that element.
  5. To center elements horizontally and vertically, utilize Flexbox with d-flex. Maintain the normal Block-Level behavior by including flex-column. Horizontally center (side-axis) with align-items-center and vertically center (main-axis) with justify-content-center.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706e706c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<body class="min-vh-100 d-flex flex-column">
  <main class="flex-grow-1 bg-danger d-flex flex-column align-items-center justify-content-center">
    <h1>WELCOME</h1>
    <p>to this test</p>
  </main>
  <footer class="bg-info">footer</footer>
</body>

I highly recommend learning programming websites with normal CSS instead of relying on Bootstrap or other libraries. Understanding the basics of CSS and flexbox will make it easier to utilize Bootstrap effectively. Mastering fundamental knowledge and programming concepts is essential for becoming an efficient web developer. While Bootstrap can simplify tasks, it should not replace the foundational understanding of web development.

Answer №2

Creating this particular layout can be easily achieved with basic CSS styling techniques.

html,
body {
  height: 100%;
  margin: 0;
}

#page {
  background-color: #ff6666;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100%;
}

main {
  place-self: center; /* Centering horizontally and vertically */
}

footer {
  background-color: #6666ff;
  text-align: right;
}
<div id="page">
  <main>
    <h1>Welcome</h1>
  </main>
  <footer>
    &copy; 2021 whatever
  </footer>
</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 is causing the button to prevent file selection?

What's causing the button to not allow file selection when clicked on? Interestingly, placing a span or div in the label enables file selection upon clicking them, but not with the button. <html> <body> <label> <input t ...

css

Updating the video tag's source attribute using JSON information

I am in the process of creating a unique video player using HTML and Javascript that will sequentially play a set of videos until all 6 have been displayed. The URLs for these videos are stored within an array that is mapped in a .json file named clips.jso ...

javascripthtmlajaxjsonhtml5-video

What is the best way to delete the onclick event of an anchor element?

Struggling to remove the onclick attribute using jQuery? Here's my code: function getBusinesses(page){ if(page==0){ alert("you are already on First Page"); $("#previous a").removeAttr("onclick ...

javascriptjqueryhtml

How to Keep Button Highlighted After Clicking

I've experimented with various methods like using :active, :focus, adding a class, and modifying CSS rules through jQuery to maintain the button highlight, but none of them have been successful. Please take a look at my code and point out any mistakes ...

jquerycsshtml

How to harness the power of loops in JavaScript

Having trouble getting this code to repeat a CSS transition properly. for (var i=0 ; i<4 ; i++){ setTimeout(function() { $('#top-left').css('margin', '45px 0 0 45px'); $('#top-mid' ...

javascriptjquerycsscss-transitions

Is there a way to add a gradient of colors to the background?

I'm looking for instructions on how to achieve a multi-color background screen similar to the image I have provided. Can anyone help with this? ...

css

Combining several markdown files into a unified HTML document

Is there a way to merge multiple .md files into a single HTML file? I know that Pandoc can convert .md to HTML, but I'm unsure if it's capable of converting multiple files at once. Would I need to create a program to manipulate the tool in orde ...

htmlmarkdownpandoc

Panel div fails to show visNetwork visualization

After experimenting with shinyLP for creating html elements and crafting network diagrams using visNetwork, an interesting observation was made. When visNetwork is placed in a well panel or without any panel at all, it displays properly. However, the issue ...

htmlrshinygraph-visualizationvisnetwork

Can the @font-face src URL be modified?

We have integrated FontAwesome with Bootstrap on our website. However, we encountered an issue when using FA with a custom minifier as it tries to load fonts from a relative path, leading to a 404 error due to the structure of the minified URL. To address ...

cssfont-awesome

Steps for positioning an element to the left and center of a div

I'm having trouble aligning my two elements in a simple horizontal menu to the middle left. I want them to have a margin of 5px on the left and right sides. Here is a screenshot and CSS style: https://i.stack.imgur.com/vzO5D.png .body_clr { wid ...

htmlcss

Can CSS be used to consistently position content in a specific manner?

I previously inquired about a similar issue and received an excellent solution. Here is my jsbin http://jsbin.com/nuwagibayo/1/edit?html,css,output where I encountered the following scenario: The positioning of 12.50 seems slightly awkward in its current ...

css

Developing a timetable feature using PHP

I am working on creating a schedule page that involves an SQL table named 'appointments' with columns for id, name, date, and time. My goal is to organize the data from this table into an HTML/CSS based table where all records with the same date ...

phphtmlmysqli

Removing extra spaces from a hyperlink using CSS

Can CSS be used to remove extra whitespaces? Within the code snippet provided, there is an additional whitespace in the <a> tag. This link is generated by a WordPress plugin and I prefer not to make changes directly to the source files of the plugin. ...

css

Internet Explorer reverts back to default fonts once the webpage has completed loading

I'm encountering a minor problem with a website I'm currently working on. My CSS and web fonts are from Fonts.com, and everything seems fine except in Internet Explorer. Initially, the page displays with the fonts correctly applied, but once the ...

cssinternet-explorerwebfonts

Strategies for identifying CSS properties within a div element

I am attempting to identify the CSS property display of a div. If it is set to display:block, I want to change the icon to -. If it is set to display:none, I want to change the icon to +. I have tried using the following code but it does not seem to work: ...

jqueryhtmlcsstree

Create paper "cut" borders using HTML canvas or pseudo-elements

As a designer with a penchant for pain, I am striving to achieve an "art nouveau" aesthetic on paper for my NextJS project with MUI as the main design solution. Despite the abundance of CSS in the background, I am faced with the challenge of creating inner ...

csscanvasnext.jscss-selectorsborder

The table populated by Ajax is blank

I am facing an issue while trying to display a table using AJAX and PHP. The table is not appearing in the designated div. Since I am new to AJAX, I have limited knowledge about its functionalities. Below is the HTML code for my div: <div class="body" ...

phpjqueryhtmlcssajax

The inclusion of a content editable feature within a carousel is leading to unexpected event propagation

I am dynamically creating an editable div using the code snippet below. <div class='reflection-field' contenteditable="true" data-number="${index}"></div> Expected Outcome: When I click on the generated div, I anticipate that the c ...

javascriptjqueryhtml

ToggleButtonGroup in Material UI is a great way to create toggle

I am trying to implement the ToggleButtonGroup feature from Material UI in my React application. I am facing an issue where I am unable to pass values into my state correctly. The code snippet provided below shows that while the Select component works fi ...

cssreactjsmaterial-ui

Tips for transferring input values from a JavaScript function to a separate PHP page for storage in a database

This code snippet allows dynamic rows to be added to a table when the add button is clicked. Now, the goal is to retrieve the values entered into the text boxes and submit them to the database. <div id="addinput"> <p> <button name=" ...

javascriptphpjqueryhtmlajax